title: Hiding empty templates until the data is loaded with Restangular and UI-Router
body: <p>I use <code>ocLazyLoad</code> to dependency injection and load CSS &amp; JS on-demand. I would not change UI-Router <code>state</code> until the data has been loaded. Also I use <code>Restangular</code> to connect API. </p>
  
  <p>Now how to call Restangular function from resolve state? It's my route:</p>
  
  <pre><code>.state('admin.users',{
      url: "/users",
      templateUrl: "user/views/users.html",
      controller:'UserListCtrl',
      resolve: {
          dep: ['$ocLazyLoad',
              function( $ocLazyLoad ){
                  return $ocLazyLoad.load(['UserService.js']).then(
                      function(){
                          return $ocLazyLoad.load(['UserListCtrl.js']);
                      }
                  );
              }],
         resolvedItems: userlist()
      }
  })
  </code></pre>
  
  <p>and my <code>UserListCtrl</code> is:</p>
  
  <pre><code>app.controller('UserListCtrl',function($scope,UserService){  
  
      /*
       * Get all users
       */
      userlist = function(){
          UserService.list().then(function(data){
               $scope.users = data;
               $scope.pagination = $scope.users.metadata;
               $scope.maxSize = 5;
          });
      }
  })
  </code></pre>
  
  <p>and my <code>UserService</code> is:</p>
  
  <pre><code>angular.module('app').service('UserService', function($rootScope, Restangular) {
      /*
       * Build collection /user
       */
      var _userService = Restangular.all('user');
  
  
      /*
       * Get list of users
       */
      this.list = function() {
          // GET /api/user
          return _userService.getList();
      };
  })
  </code></pre>