Can someone help me I am confused in my AngularJs code

Question

Actually I am using pagination in web page,i am putting one condition ng-if="id !== 0" if this code is true then it will hide some portion if its false its showing that portion.My problem is if condition is false then it showing that portion but pagination is not working when i am clicking on next its not going to the word.but if i am using the same condition in ng-show its working fine pagination is also working.Please help me whats going on there i am unable to understand. Here is my code..

<div class="orphan-navigation col-md-12" ng-show="totalOrphans !== 0">
                <div class="col-md-2 pull-left orphan-count">
                    {{id}} / {{totalOrphans}}
                </div>
                <div class="navigation-button-container pull-right">
                    <uib-pagination total-items="totalOrphans" ng-model="id" max-size="limitPages" ng-change="orphanChanged()" items-per-page="1">
                    </uib-pagination>
                </div>
            </div>
            <div class="col-md-12 orphan-text-label" ng-show="totalOrphans !== 0">
                <div class="col-sm-3 label label-default pull-left orphan-key">Un-Annotated word</div>
                <div class="col-xs-4 small-left-margin label orphan-key searchText">{{orphanData.orphan.attributes.text}}</div>
            </div>

in above code i have used ng-show="totalOrphans !== 0" for ng-show my pagination is working fine when i am clicking in next button its highlighting other words.thats i want result.

but if i used ng-if instead of ng-show my pagination is not working,its not highlighting next word when i am clicking on next.

here i am attaching image of my web page.

if someone has still not understand my question please comment here ,i will try to clarify you thanks in advance,

Answer 1

ng-if will create it's own scope. Also uib-pagination creates it's own scope and probably use its parent scope to create your pagination. Now if the ng-if has it's own scope uib-pagination can't use the scope paramater from you controller. For this reason there is the ControllerAs Syntax. To use it you need to define it in ng-controller like: ng-controller="AppCtrl as vm" . Inside your controller you need to define 'vm' with 'this':

app.controller('AppCtrl', [function() {
    var vm = this
    vm.id = 5;
}]);

Now you can use the id inside the HTML like this:

<div ng-controller="AppCtrl as vm">
    <span>{{vm.id}}</span>
</div>

As an example your code with ng-if that you provided need to look like this:

<div class="orphan-navigation col-md-12" ng-if="vm.totalOrphans !== 0">
    <div class="col-md-2 pull-left orphan-count">
        {{vm.id}} / {{vm.totalOrphans}}
    </div>
    <div class="navigation-button-container pull-right">
        <uib-pagination total-items="vm.totalOrphans" ng-model="vm.id" max-size="vm.limitPages" ng-change="vm.orphanChanged()" items-per-page="1">
        </uib-pagination>
    </div>
</div>
<div class="col-md-12 orphan-text-label" ng-if="vm.totalOrphans !== 0">
    <div class="col-sm-3 label label-default pull-left orphan-key">Un-Annotated word</div>
    <div class="col-xs-4 small-left-margin label orphan-key searchText">{{vm.orphanData.orphan.attributes.text}}</div>
</div>