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/

sorry about that. Posting the entire code was making the post lengthy and new edits weren't attracting any responses after a certain period. Been fighting with this issue for long. Hence tried creating a simpler/almost complete code again.Thanks for your help. — sukesh, Jul 09 '15 at 10:26
I do not understand why the `$scope.SelectedPage` wasnt updating with `ng-change`, but this little hack worked. - sending the value as parameter — sukesh, Jul 09 '15 at 10:28
`data-ng-change="ShowSelectedPage(SelectedPage);` and in controller - `$scope.ShowSelectedPage = function (val) {$scope.SelectedPage=val;}` — sukesh, Jul 09 '15 at 10:29
well, if the answer to this question is actually the key to the solution, then I suspect that you are falling in the trap of JavaScript Prototype Inheritance. http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs — Claies, Jul 09 '15 at 10:29

RIYAJ KHAN · Accepted Answer · 2017-12-06T15:10:14.467

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);

}

What a great insight! Thanks! – ronenmiller May 10 '18 at 14:40 — ronenmiller, May 10 '18 at 14:40

scope variable not updating with ng-change - angularjs

1 Answers1