在angular中使用ng-if时，视图不会更新

Question

I have buttons like this:

<div>
    <ul>                            
        <li ng-if="role === 'artist'"><a data-ng-click="search.status = 'PORTFOLIO'" href="">PORTFOLIO</a></li>
        <li ><a data-ng-click="Data1 = true;Data2 = false; search.status = ''" href="">ALL PROJECTS</a></li>
        <li ><a data-ng-click="Data1 = false;Data2 = true;" href="">NOTIFICATIONS</a></li>
        <li ><a data-ng-click="Data1 = true;Data2 = false; search.status = 'COMPLETED PROJECTS'" href="">COMPLETED PROJECTS</a></li>
        <li  ng-if="role === 'admin'" ><a data-ng-click="Data1 = true;Data2 = false; search.status = 'OPEN'" href="">SAVED PROJECTS</a></li>
        <li  ng-if="role === 'admin'" ><a data-ng-click="Data1 = true;Data2 = false; search.status = 'IN PROGRESS'" href="">RUNNING PROJECTS</a></li>                           
        <li  ng-if="role === 'admin'" ><a data-ng-click="Data1 = true;Data2 = false; search.status = 'ASSETS'" href="">ASSETS</a></li>
        <li  ng-if="role === 'admin'" ><a data-ng-click="Data1 = true;Data2 = false; search.status = 'JOB REQUESTS'" href="">JOB REQUESTS</a></li>
    </ul>
</div>

Where I am checking the role using ng-if="role=='admin'" in the last four buttons.

The problem is when I click the 3rd button(Notifications) and then click on any button where ng-if is defined then the view is not populating.

When I navigate from notifications button(3rd button) to All projects button(1st button) and then navigate to any other button that has ng-if it is working fine.

Also if I remove ng-if it is working fine. Why is this happening to only particular buttons?

ng-repeat to populate data based on button click:

<div ng-if="workOrdersList.length > 0">
    <ul ng-show="Data1">                                   
        <li dir-paginate="wd in workOrdersList | filter: search.status | filter: search.name | itemsPerPage: 10">
            <a href="">
                <h4>{{wd.name}}</h4>
            </a>
            <p>Status: {{wd.status}}</p>
        </li>
    </ul>


    <ul ng-show="Data2">
        <li>
            <div ng-show="notificationDataDashord.length">
                <h3>Notifications </h3>
                <div infinite-scroll="getPagination()">
                    <div ng-repeat="notification in notificationDataDashord" ng-class="{even: $even, odd: $odd}" >
                        <strong>{{notification.user_name}}</strong>
                        <a  href ng-click="openModal(notification.work_module_id)">{{notification.message}}</a>
                    </div><!--/row-->

                    <div ng-if="notification.image_url">
                        <a href="{{notification.image_url}}" target="_blank">
                            <img src="{{notification.image_url}}">
                        </a>
                    </div>
                </div><!--/notifications-->
            </div><!--/tabs conent-->
        </li>
    </ul>
    <dir-pagination-controls boundary-links="true" ng-show="Data1" auto-hide="true"></dir-pagination-controls>
</div>

Controller:

$scope.Data1 = true; 
$scope.Data2 = false;

Answer 1

I suggest you try to use ng-show/ng-hide instead of ng-if in your approach.

Here is a good read When to favor ng-if vs. ng-show/ng-hide?