scope variable not changing - angularjs

Question

The scope variable SelectedPage is not updating. There is a ul li for pagination, that has a dropdown & then a next button. User can go to a page either by clicking the button or choosing an option in select. When I click on Next or select 2 in the dropdown, I'm expecting the value of $scope.SelectedPage to change to 2. But it always remains 1.

HTML:

<ul> 
 <li>
 <select ng-model="SelectedPage" ng-change="ShowPageResult()">
 <option value="1">1</option>
 <option value="2">2</option>
 </select>
 </li>
 <li ng-click="SelectedPage = SelectedPage + 1;ShowPageResult();"><a href=" #">Next</a></li> 
</ul>

Ctrl.js

$scope.ShowPageResult = function () {
 console.log($scope.SelectedPage); //always prints 1 
 } 

EDIT http://jsfiddle.net/g8pLhf79/ After the page loads, click on 'Next', the no. increments. Now select a value in the dropdown and click on next. It now appends "1" instead of incrementing. I hope this helps understand the issue.

Answer 1

Here we go (2nd attempt): http://jsfiddle.net/g8pLhf79/11/

I made minimal changes to have the code work in your way, in general Angular is about separating View from Model/Controller so you're encouraged to keep the logic separated from the view. But anyway here it is the way you want it:

<div ng-app="app" ng-controller="ctrl">
<ul>
 <li>
 <select ng-model="SelectedPage" ng-change="ShowPageResult();">
 <option value="1">1</option>
 <option value="2">2</option>
 </select>
 </li>
 <li ng-click="SelectedPage = (SelectedPage * 1+1);ShowPageResult();"><a href=" #">Next</a>
 </li>
 <li>Selected Page : {{SelectedPage}}</li>
</ul>
</div>

Controller:

var app = angular.module("app", []);
app.controller("ctrl", function ($scope) {
 $scope.SelectedPage = 1;
 $scope.ShowPageResult = function () {
 console.log($scope.SelectedPage);
 } 
});

• sukesh: I would go with your method, but I have other buttons like first, prev & last along with next. So, in order to minimize code, I wanted to increment it in the html itself. This doc says so but not working - docs.angularjs.org/api/ng/directive/ngClick. Please also check my fiddle

Answer 2

Here is the working example you can refer the plunker.

http://plnkr.co/edit/wOXWXvPZw9AYrqyy486h?p=preview

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
 $scope.name = 'World';
 $scope.arr = ["0","1"];
 $scope.ShowPageResult = function () {
 alert($scope.SelectedPage); //always prints 1 
 } 
});

plz visit this one according to your requirement. http://plnkr.co/edit/wOXWXvPZw9AYrqyy486h?p=preview

• sukesh: When I select 1 in the dropdown and click on Next, the value in the alert should be 2. And also the value in the dropdown should change to 2. That is what i'm trying to do with my code. In your example, it is not so.
• ngLover: you need to do something like this visit on different link.
• sukesh: Could you please tell me why this isn't working ng-click="SelectedPage = SelectedPage + 1;
• ngLover: Because the model binded on select is a integer and you are incrementing that value on the contrary the value in option tag is string just refer link.. plnkr.co/edit/wOXWXvPZw9AYrqyy486h?p=preview
• sukesh: Makes sense. So, how to increment the variable value in html. But, the doc says, it increments instead of append - docs.angularjs.org/api/ng/directive/ngClick