Angular ui modal with controller in separate js file

Question

I am trying to make a modal which can be instantiated from multiple places in the app. from the example given here: Angular directives for Bootstrap the modal controller is

Answer 1

Of course, you can do it. First of all you should use a function declaration.

// modalCtrl.js
// This file has to load before modalTestCtrl controller
function modalCtrl ($scope) {
   $scope.hello = 'Works';
};

Then, change the modalTestCtrl like:

app.controller('modalTestCtrl', ['$scope', '$modal', function($scope, $modal) {
$scope.openModal = function() {
    var modalInstance = $modal.open({
        templateUrl: 'modal.html',
        controller: modalCtrl, //This must be a referance, not a string
        size: 'sm'

    });
}
}]);

With the changes above, you code has to work.