ng-if not working, ng-show works

Question

I have an html where I must show AngularJS template only when I reach the bottom of the page (I've implemented infinite scrolling).

The first page comes from the server. So I've to put an ng-if for that first page, because the user could have a bookmark with "address/page=5", and the html template for the first page from the server doesn't have to be in the page.

Now I have the url "address", specific for the page from the server.

ng-if doesn't work, the page is empty, but if I use ng-show it all works fine.

HTML

<div ng-app="MyApp" ng-controller="MyCtrl">
    <div id="itemsGrid" ng-controller="aCtrl" infinite-scroll='item_gallery.nextPage()' infinite-scroll-distance='1' infinite-scroll-disabled=''> 

        <div ng-show="server_page()"> 
        //here the first page template

JS

myApp.controller('MyCtrl', function($scope, ItemGallery) {
    $scope.item_gallery = new ItemGallery();
    ...
}

myApp.factory('ItemGallery', function($http) {
    var ItemGallery = function() {
    ...
        ItemGallery.prototype.nextPage = function() {
        ...
        }
    return ItemGallery;
}

If I do comment

//$scope.item_gallery = new ItemGallery();

ng-if works fine, the page is correctly showed.

The page is showed when I use: ng-if + line commented, ng-show.

NOTE:

ng-if="true" doesn't work, it's not a problem of the function used, ng-if="server_page()" I don't want to use ng-show.

Why ng-if doesn't work? What's the problem with that line? How can I make it working?

Answer 1

ng-if creates a new child scope

to keep a watch on model in ng if the thumb rule is:

DON'T USE SCOPE AS MODEL e.g.

ng-if='showStuff' //here my scope is model **INCORRECT**
ng-if='someObject.showStuff' // ** CORRECT **

use an object property in ng-model then even if ng-if creates the new child scope parent scope will have the changes.

on the other hand ng-show does not create new child scope it works in parent scope.

in you case please change

$scope.item_gallery = new ItemGallery();

to

$scope.someObject.item_gallery = new ItemGallery();

then it should work.