0

I have the following tabset and controller:

<tabset>
  <tab>
     <tab-heading>test</tab-heading>
     <div>
        <input type="text" class="form-control" data-ng-model="searchValue" data-ng-enter="search()" />
     </div>    
  </tab>
  <tab>...</tab>
</tabset>


app.controller('MyController', function($scope) {
   $scope.search = function() {
       var param = $scope.searchValue;
       //param is undefined
   };
}

In the above, $scope.searchValue is always undefined. I know this has something to do with the scope since if I remove the tabset, it works fine. I have seen other simliar posts that suggest adding an empty object to the controller, such as: $scope.searchValue = {}; I tried adding $scope.searchValue = '' but this did not resolve my issue. Whats the solution? Thanks.

user1491636
  • 2,355
  • 11
  • 44
  • 71
  • Can you post more of your code in a JSFiddle? Are you defining the app and the controller properly in the HTML? Does the function definitely get called (i.e. do you have some console.log() output somewhere in it?) when you hit enter? – Jeff N Aug 15 '14 at 14:27

1 Answers1

1

You should try using a dot. Like this:

<input type="text" ng-model="data.searchValue" />

app.controller('MyController', function($scope) {
    $scope.data.searchValue = 'test';
});

Because if a new scope is created, the variable might get replaced instead of updated.

mobabur94
  • 360
  • 2
  • 10
  • Thanks, this worked, however I don't quite understand you're explanation. – user1491636 Aug 19 '14 at 12:56
  • It is better explained [here](http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs/14049482#14049482). Apparently the golden rule of AngularJS is to always use a `.` with ngModel. – mobabur94 Aug 19 '14 at 15:02