Dynamically update header seems not working

ionic-v1
1

I have been stumped on this problem for a while now . when i navigate between different child page the ion-content is well updated but the header content is not showing anything until I reload the page (using web browser), I think it doesn’t make sense since I would like to make a mobile app. I’m loading the content dynamically (via HTTP GET)

In one of my views, I have the following

<ion-view cache-view="false">
      <ion-nav-buttons side="right">
         <button class="button button-icon icon ion-chevron-right"></button>
      <ion-nav-buttons>
      <ion-nav-buttons side="left">
         <button class="button button-icon icon ion-chevron-left"></button>
      <ion-nav-buttons>
      <ion-nav-title> 
         <h1>{{header.title}}</h1>
      </ion-nav-title>
            <ion-content>
            <ul class="list">
                <li class="item item-checkbox" ng-repeat="item in list">
                    <label class="checkbox"> <input type="checkbox" ng-click="selectcategories(item.id)" 
                    ng-checked="selection.indexOf(item.id) > -1"></label>
                    {{ item.catname |uppercase}}
                </li>
            </ul>
            </ion-content>
    </ion-view>

in the controller for the above view, I have

app.controller('usercategoryController',
    function($scope,getcategories,$log)
        {
            $log.info("userCategoryController Called ...");
            $scope.list=getcategories;
            $scope.header={};
            $scope.header.title="Categories";
    });

my app config is :

app.config([’$stateProvider’,’$urlRouterProvider’,
function($stateProvider,$urlRouterProvider)
{
$stateProvider

            state('user',{
                 abstract:true,
                 url:"/user",
                 templateUrl:'views/user.html',
             }).state('user.categories',{
                 url:"/categories",
                 templateUrl:'views/categories.html',
                 controller: 'usercategoryController',
                 resolve:{
                     getcategories: function(userService) {
                         return userService.getcategories();
                    }
                 }, 

             })
             $urlRouterProvider.otherwise('/user');
        }

]);
and here is my abstract view

<ion-nav-bar class="bar bar-header bar-positive">
</ion-nav-bar>
<ion-nav-view animation="slide-left-right"></ion-nav-view>

it always shows a blue header with no content inside till i reload the browser. for the header title I have tried both title and view-title attribute with no success .

if someone has a solution please let me know

2

If you debug your app, putting a breakpoint in the usercategoryController, it has been reached? If not, it’s because route is cache: true (by default), change it to false. Example:

.state('app.browse', {
  cache: false,
  url: "/browse",
  views: {
    'menuContent' :{
      templateUrl: "templates/browse.html",
      controller: "AppCtrl"
    }
  }
})

Keep in mind: this approach is not good if you’re getting data directly from controller.