Chapter 8: Implementing nested ui-router resolves

HTML

<script src="https://code.angularjs.org/1.3.2/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.11/angular-ui-router.min.js"></script>
<div ng-app="myApp">
    <a ui-sref="widget({widgetId:6})">See Widget 6</a>
    <div ui-view></div>
</div>

JavaScript

angular.module('myApp', ['ui.router'])
.config(function($stateProvider) {
    $stateProvider
    .state('widget', {
        url: '/widgets',
        template: '<show-data widget = "widget"></show-data>',
        controller : ['widget','$scope', function(widget, $scope){
             $scope.widget = widget;  
        }],
        resolve: {
            // standard resolve value promise definition
            //comments - This resolve is available to your controller, You can not use this in resolve
            widget: function() {
                return {
                    name: 'myWidget'
                };
            }
        }
    });
});

    angular.module('myApp').directive('showData', [ function() {
        return {
            restrict: 'E',
             scope: {
                widget: '='
             },
            template: "{{name}}",
            controller: 'boostCreditController',
            bindToController: true,
            controllerAs: 'boostCreditCtrl'
        }
    }])
			.controller('boostCreditController', ['$scope', function($scope) {
      			console.log($scope.boostCreditCtrl.widget);
						$scope.name = $scope.boostCreditCtrl.widget.name;
      }]);