scope variable not updating with ng-change - angularjs

Question

Seems like a simple problem though but finding it hard to fix. There is a pagination component, that has a button & a dropdown. User can go to a page by either clicking the button or selecting that page number in dropdown.

The problem is, when I select a value in the dropdown, nothing happens. Because the scope variable doesnt change from the previous one.

aspx:

<div data-ng-app="app" data-ng-controller="ReportsCtrl">
<div id="paging-top">                
 <div>
   <ul>         
     <li>
       <select data-ng-model="SelectedPage" data-ng-change="ShowSelectedPage();" 
        data-ng-options="num for num in PageNumbers track by num">
       </select>
     </li>
     <li data-ng-click="ShowNextPage();"><a href="#">Next</a></li>         
   </ul>
  </div>
</div>

app.js

var app = angular.module("app", ["ngRoute"]);

ReportsCtrl.js

app.controller("ReportsCtrl", ["$scope","ReportsFactory",function ($scope,ReportsFactory) {

init();
var init = function () { 
  $scope.ShowReport(1);
}

$scope.ShowReport = function (pageNumber) {
  GetUserResponsesReport(pageNumber);
} 

function GetUserResponsesReport(pageNumber) {

    $scope.UserResponsesReport = [];        
    var promise = ReportsFactory.GetReport();
    promise.then(function (success) {
        if (success.data != null && success.data != '') {                
            $scope.UserResponsesReport = success.data;                
            BindPageNumbers(50, pageNumber);
        }            
    });        
}

function BindPageNumbers(totalRows, selectedPage) {        
    $scope.PageNumbers = [];
    for (var i = 1; i <= 5 ; i++) {
        $scope.PageNumbers.push(i);
    }
    $scope.SelectedPage = selectedPage;        
}

$scope.ShowSelectedPage = function () {
    alert($scope.SelectedPage);
    $scope.ShowReport($scope.SelectedPage);
}

 $scope.ShowNextPage = function () {        
    $scope.SelectedPage = $scope.SelectedPage + 1;
    $scope.ShowReport($scope.SelectedPage);        
}   
}]);

Say, the selected value in dropdown is 1. When I select 2 in the dropdown, the alert shows1. When Next is clicked, the dropdown selection changes to 2 as expected. Now, when I select 1 in the dropdown, the alert shows 2.

Tried to make a fiddle, but do not know how to do with a promise - http://jsfiddle.net/bpq5wxex/2/

Answer 1

With your OP SelectedPage is just primitive variable.

With every angular directive new scope is get created.

So,SelectedPage is not update outside the ng-repeat scope after drop-down is changed i.e. in parent scope which is your controller. In order to do this,use Object variable instead of primitive data types as it update the value by reference having same memory location.

Try to define SelectedPage object in controller in this way.

$scope.objSelectedPage = {SelectedPage:''};

in HTML

<select data-ng-model="objSelectedPage.SelectedPage" data-ng-change="ShowSelectedPage();"

In ShowSelectedPage

 $scope.ShowSelectedPage = function () {

    console.log($scope.objSelectedPage.SelectedPage);
    $scope.ShowReport($scope.objSelectedPage.SelectedPage);

}