scope variable inside directive is not updating - angularjs - angularjs

Question

I have a simple directive for a table with pagination. The Pagination has a dropdown & a button. User can either select a page in the dropdown or click on the button to navigate.
Say, the dropdown lists page numbers 1, 2, 3 and the selected page is 1. When user clicks on 'Next', the selected value in the dropdown should become 2.
Issue:
When Next is clicked, though the scope variable SelectedPage is seen updated in the console, it is not reflecting in the view.
report.html:
<div>
<ul>
<li>
<select ng-model="$scope.state.SelectedPage" ng-change="ShowPageResult()">
<option ng-repeat="num in PageNumbers value="{{num}}">{{num}}</option>
</select>
</li>
<li ng-click="ShowNextPage();">Next</li>
</ul>
<table>
...//some html
</table>
</div>
directive
app.directive('Report', function () {
return {
restrict: 'AE',
replace: 'true',
templateUrl: '/views/report.html'
};
});
controller:
$scope.state={};
$scope.ShowPageResult = function () {
GetReport($scope.state.SelectedPage);
}
$scope.ShowNextPage = function () {
$scope.state.SelectedPage = $scope.state.SelectedPage + 1;
GetReport($scope.state.SelectedPage);
}
//get report data to bind to table
function GetReport(pageNumber) {
$scope.UserReport = [];
var promise = ReportsFactory.GetData();
promise.then(function (success) {
if (success.data != null && success.data != '') {
$scope.UserReport = success.data;
BindPageNumbers($scope.UserReport[0].TotalRows, pageNumber);
}
},
function (error) {
console.log(error);
});
}
//bind page numbers to dropdown in pagination
function BindPageNumbers(totalRows, selectedPage) {
$scope.PageNumbers = [];
$scope.LastPageNumber = Math.ceil((totalRows / 10));
for (var i = 1; i <= Math.ceil((totalRows / 10)) ; i++) {
$scope.PageNumbers.push(i);
}
$scope.state.SelectedPage = selectedPage; //can see the no. becomes 2 here.
}

Answer 1

My guess:
ng-change="ShowPageResult()" is declared in the directive template and because your directive declares its own scope, then it looks for the definition of ShowPageResult() in the directive's scope and not in the controller.
Therefore the change handler function is null and does nothing.

Answer 2

Try putting SelectedPage in an object. So in your controller
$scope.state = {
SelectedPage: 1
};
You need to initialise the SelectedPage.
Then reference SelectedPage with state.SelectedPage in your controller and in your directive template:
<select ng-model="state.SelectedPage" ng-change="ShowPageResult()">
Because of javascript prototypical inheritance, the SelectedPage in your directive will be different to the one in your controller. See Understanding Scopes
And it's not clear to me why you're binding BindPageNumbers to your directive scope. Firstly, there is no controller in your directive so it never gets called there and there is no call in the template either.
Second, BindPageNumbers is not bound to the parent scope so the directive wont get that function anyway.