angularjsangularjs-watch

AngularJS watch not working for drop-down(select) change

AngularJS watch not working for drop-down change. Here is my code, this is not exactly the original code , I just simulated.

Code :

<body ng-app="app" ng-controller="ctrl">
<select ng-model=“selectedId" ng-options="val as val.name for val in options | orderBy:'id'">
</select>
<script>
angular.module("app",[])
  .controller("ctrl",['$scope',function($scope){
    $scope.options = [
      {"id":1, "name":"First"},
      {"id":2, "name":"Second"}
    ]
    $scope.selectedId = {"id":1, "name":"First"}
    $scope.$watch('selectedId’,function(selVal) {
       console.log(selVal);
     });
  }])
 </script>
</body>
Solution

  • I am adding the working solution.

    I have changed $scope.selectedId to $scope.filters.selectedId and add a watch on $scope.filters.selectedId.

    I don't know why this works.