Edit in JSFiddle

var app = angular.module("app",['ui.router']);
app.config(function($stateProvider,$urlRouterProvider){
	$urlRouterProvider.otherwise('/');
  $stateProvider
  	.state('page1',{
    	url:'/pg1',
      templateUrl:'page1.html',
      controller:'ctrlpg1',
      resolve:{
      	greeting:function($q, $timeout){
        	var deferred = $q.defer();
          $timeout(function(){
          	deferred.resolve('promise');
          },2000);
          return deferred.promise;
        },
       
      }
    })
    .state('page2',{
    	url:'/pg2',
      templateUrl:'page2.html',
      controller:'ctrlpg2',
      resolve:{
      	simpleObj:function(){
        	return{value:'simple'}
        }
      }
    })
})

app.controller('ctrlmain',function($scope){
  $scope.showSpinner = false;

  $scope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
    if (toState.resolve) {
    	$scope.showSpinner =true;
    }
  });
  $scope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
    if (toState.resolve) {
    	$scope.showSpinner = false;
    }
  });
})

app.controller('ctrlpg1',function($scope,greeting){
	$scope.kk = greeting;
})

app.controller('ctrlpg2',function($scope,simpleObj){
	$scope.kk = simpleObj.value;
})

<div ng-app="app" ng-controller="ctrlmain">
  <span ng-show="showSpinner">Loading...</span>
  <br>
  <a href="#/pg1">pg1</a>
  <a href="#/pg2">pg2</a>
  <br><br>
  <ui-view></ui-view>
  <script type="text/ng-template" id="page1.html">
    {{kk}}
  </script>
  <script type="text/ng-template" id="page2.html">
    {{kk}}
  </script>
</div>