angularjs templates not hiding div from route

Question

It's two page user registeration process depending on the role the second page could be different but the first page will always remain the same. what I want I that user can go forward and backwards on both screens with persistent data. I trying a static page at start and then hide it and add the second template from route.

This is my angular app controller.

app.controller('addlandlordController' , function($scope , $http , $route ,API_URL ,  $routeParams , uploadService ){
$scope.API_URL = API_URL;
$scope.landVisible = true;
$scope.IsVisible = true;

  if( $routeParams.test)
  {  
    scope.$apply(function () {
        $scope.IsVisible = false;
    });
    alert( $routeParams.test);
  }

$scope.adduser = function($route){
         var data = $.param({
                fName: $scope.firstName,
                lName: $scope.lastName,
                role: 'landlord',
                email: $scope.email,
                linkId: $scope.linkId,
                password: $scope.password,
            });

        var config = {
            headers : {
                'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
            }
        }

        $http.post(API_URL + 'user' ,  data , config)
           .then(
               function(response){
                    //$scope.IsVisible = false;
                    //alert('success');
               }, 
               function(response){
                 // failure callback
                 alert('fail');
               }
            );
    }
});

I have a div in html like this,.

<div id="content" class="container1" ng-controller='addlandlordController' >
<div ng-show = "IsVisible">

And following is my route in config,.

app.config(function($routeProvider){    
            $routeProvider.when('/landlord' , {
                templateUrl : 'template/addlandlord.html',
                controller  : 'addlandlordController',
                 resolve: {
                                test: function ($route) { $route.current.params.test = true; }
                          }
            })
        });

What I want is that when the user click on the following button.

 <a href='#/landlord'> <button  ng-click="adduser()" class="btn btn-info btn-lg signup-btn-land btn-size">Create an Account</button></a>

On click that button #/landlord will be added to the url and the route config code will run and add the other template in ng-view which is happening. Now next step is to hide the old div above in such a way that when user go back one sten only the previous code should show and when user goes again into the next screen only the next template should be visible and mean while data should remain same for the both views.

Issues I am facing is

1. Css is for template view is missing although the css files are already in the commen header. But appears when a place css in the style within template.

2. if I hide the first div in the response of adduser then if user go back it still hidden. it doesn't appears unless I refresh the page.

But if went to hide it through route config the value turn false but div never hides.

Answer 1

Please check this

  scope.$apply(function () {
        $scope.IsVisible = false;
    });

You are using $apply on scope, but not in $scope.

And $applyAsync is preferable method to trigger digest without risking of error "$digest already in progress"

$applyAsync example:

$element.on('click', ()=>{
             $scope.model.testValue = 'I have been updated not from angular circle';
             $scope.$applyAsync();
});

Link to the docs

Nice article to read