Angularjs javascript modals

EDIT: added a last step.

Here's how I would go about it. Let's assume you are using Angular-ui-bootstrap modals.

Firstly you need a "Modal Factory" to contain the definitions of your modals, which means they'll have the url to the view, controller name, and any variable you might wanna pass onto your controller. For example:

"use strict";
angular.module("sampleModule").factory("AppSharedModalFactory", AppSharedModalFactory);

AppSharedModalFactory.$inject = ["$modal"];

function AppSharedModalFactory($modal) {
    var factory = {};
    factory.openSelectionModal = openSelectionModal;

    function openSelectionModal (sampleVar) {

        var modalInstance = $modal.open({
            templateUrl:     "sampleRoot/sampleFolder/sampleView.html",
            controller: "SelectionModalController",
            size: "lg", // or other sizes, read the docs
            sample: { // resolve helps with passing variables into a controller when you instantiate it
                module: function () {
                    return sampleVar;
                }
            }
        });

        return modalInstance.result;
    };
    return factory;
};

So far you have a factory that creates a modal instance, and returns the PROMISE of that modal instance.

Secondly of course you need sampleView.html and SelectionModalController to be defined in proper places and be included in the project. Remember that if you want to make use of the sample variable defined while defining the modal instance, you need to inject it into your controller. Example:

"use strict";
angular.module("sampleModule").controller("SelectionModalController", SelectionModalController);

SelectionModalController.$inject = ["sample"];

function SelectionModalController(myVariableNameForSample) {
};

Thirdly, in the controller that you want to open the modal on, you inject your AppSharedModalFactory and simply call the factory function and pass the variable you want to it, which is of course optional, and then use the returned promise to resolve anything you want to resolve after the modal has been closed by being closed -which results in a resolved promise- or dismissed -which results in a rejected promise. Example:

    $scope.openSelectionModal = function (sample) {
        appSharedModalFactory.openSelectionModal(sample).then(function (result) {
    console.log("yay I got a successful return.");
    }, function () {
    console.log("My modal was dismissed :(");
    });
};

And at last, you can do <a href="" ng-click="openSelectionModal('Hello World!')">click to open modal!</a> in your html.