How to use the same controller for modal and non-modal form in Angular UI Bootstrap?

Question

I\'ve got a modal with a registration form. The same form should be displayed at the bottom of the landing page not in a modal.

Currently my controller that handles

Answer 1

After struggling for a long while I found a easier trick to reuse our Controller for both modal and normal case.

I found that we can pass caller's scope to modal controller, so I pushed modalInstance into $scope and passed it to the modal controller. Now you don't have unknown provider problem because $scope is a well known one.

Below is an example:

CallerController = function($rootScope, ...) {
   var modalScope = $rootScope.$new();
   modalScope.modalInstance = $modal.open({
        templateUrl: tempUrl,
        controller: ReusableModalController,
        scope: modalScope // <- This is it!
    });

    modalScope.modalInstance.result.then(function (result) {
        // Closed
    }, function () {
        // Dismissed
    });
};

ReusableModalController = function($scope, ...){
    var dataToSendBack = 'Hello World';
    $scope.modalInstance.close(dataToSendBack);
};

Cheers!