[AngularJS] $scope.$watch not working

[Yogesh N]

Hi, 

I am using angularjs custom directive for search in the navbar. 

Here is the html code:

<ion-view title="Outstanding Payables">
      <search-bar ng-model="search"></search-bar>

</ion-view>



<https://lh3.googleusercontent.com/-bg5lAtflGdM/VbyCrphXdHI/AAAAAAAAAEA/URbvTgy9pmA/s1600/Screenshot_2015-08-01-13-49-30.png>



<https://lh3.googleusercontent.com/-A671aXJbU44/VbyC1SiH5ZI/AAAAAAAAAEI/pp1_KP5eess/s1600/Screenshot_2015-08-01-13-49-39.png>


.directive('searchBar', [function () {
  return {
    scope: {
      ngModel: '='
    },
    require: ['^ionNavBar', '?ngModel'],
    restrict: 'E',
    replace: true,
    template: '<ion-nav-buttons side="secondary">'+
            '<div class="searchBar">'+
              '<div class="searchTxt" ng-show="ngModel.show">'+
                  '<div class="bgdiv"></div>'+
                  '<div class="bgtxt">'+
                    '<input type="text" placeholder="Search" 
ng-model="ngModel.txt">'+
                  '</div>'+
                '</div>'+
                '<i class="icon placeholder-icon" 
ng-click="ngModel.txt=\'\';ngModel.show=!ngModel.show"></i>'+
            '</div>'+
            '<button class="button button-icon ion-android-more-vertical" 
ng-click="popover.show($event)">' +
            '</button>' +
          '</ion-nav-buttons>',

    compile: function (element, attrs) {
      var icon=attrs.icon
          || (ionic.Platform.isAndroid() && 'ion-android-search')
          || 'ion-search';
          
 angular.element(element[0].querySelector('.icon')).addClass(icon);

      return function($scope, $element, $attrs, ctrls) {
        console.log('ctrls :' + JSON.stringify(ctrls));
        var navBarCtrl = ctrls[0];
               $scope.navElement = $attrs.side === 'right' ? 
navBarCtrl.rightButtonsElement : navBarCtrl.leftButtonsElement;
          };
   },
    controller : ['$scope','$ionicNavBarDelegate', 
function($scope,$ionicNavBarDelegate){
      var title, definedClass;
      $scope.$watch('ngModel.show', function(showing, oldVal, scope) {
           if(showing!==oldVal) {
          if(showing) {
            if(!definedClass) {
              var numicons=$scope.navElement.children().length;
                        
 
angular.element($scope.navElement[0].querySelector('.searchBar')).addClass('numicons'+numicons);
            }

            title = $ionicNavBarDelegate.getTitle();
                  $ionicNavBarDelegate.setTitle('');
          } else {
                 $ionicNavBarDelegate.setTitle(title);
          }
        } else if (!title) {
          title = $ionicNavBarDelegate.title();
            }
      });
    }]
  };
}])


Now the issue is when i click on the search icon, it is not executing 
$scope.$watch function().
Please help me out.

Here is the example i took from codepen 
<http://codepen.io/bgrossi/pen/JtvsL>

Thanks in advance.

-- 
You received this message because you are subscribed to the Google Groups 
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.