Reusing Angular Controller for modal and non-modal

Question

How could I reuse the angular controller for both modal and non-modal? I have a new business requirement to have the same form that already exists in the modal (only modal body) placed on a tab on a new page.

I am currently using resolveas part of my modal initialization to pass a variable to a modal controller.

Modal initialization

var modalInstance = $uibModal.open({
    templateUrl: 'myModal.html',
    controller: 'myCtrl',
    resolve: {
        foo: function() { return scope.fooFromScope; },
    }
});

Existing controller

myApp.controller('hrpoConductReviewModalCtrl', ['$scope', 'foo', function($scope, foo) {
    ...
}]);

Not currently used $uibModalInstanceinside my modal code.

Is there a way to initialize the controller from another controller and pass the variable foo? There is already an existing question that asks the same thing, but the main answer is focused on using scopeas part of modal initialization, rather than resolve.

---

Existing question: How to use the same controller for modal and non-modal form in angular UT Bootstrap?

Answer 1

If you use ui-router, you can simply use permission from ui-router:

$stateProvider
    .state('conductReview', {
        url: '/review',
        templateUrl: '/js/templates/review.html',
        controller: 'hrpoConductReviewModalCtrl',
        resolve: {
            foo: function() { return scope.fooFromScope; },
            $uibModalInstance: function () { return null; } // <- workaround if you want to use $uibModalInstance in your controller.
        }
    })

If you are not using ui-router, you definitely need to check it out ,-)