Search code examples
angularjsionic-frameworkangular-ngmodel

AngularJS doesn't bind ng-model to scope


I have the following code for my search function

<ion-content class="has-header" id="content" push-search>
  <div id="search-bar">
   <div class="item item-input-inset">
     <label class="item-input-wrapper" id="search-input">
      <i class="icon ion-search placeholder-icon"></i>
      <input type="text" placeholder="Search" ng-model="query" ng-change="search()">
     </label>
    </div>
   </div>
  <div>
   <// code for displaying search results//>
</ion-content>

Search Controller

.controller('SearchCtrl', function($scope, SearchFactory) {
  var doSearch = ionic.debounce(function(query) {
    console.log($scope);
    $scope.results = SearchFactory.get({'query':$scope.query});
  }, 500);
  $scope.search = function() {
    doSearch($scope.query);
  }
})

Search Factory:

.factory('SearchFactory', function($resource) {
   return $resource(url.concat('/paths/search/:query'), 
                   {query: '@query' } ,
                   { get: { method: 'GET' , isArray: true} }
           );

})

When I do call Search, there is no $scope.query in my $scope: (see) https://i.sstatic.net/MuxRt.png


Solution

  • It was solved. See this Link for more info http://jimhoskins.com/2012/12/14/nested-scopes-in-angularjs.html