MOdal components are extremely common in web applications or even on small websites.

In the upcoming sections, we will show a simple modal solution loading content from a simple controller using the Bootstrap UI, and also an alternative way to extend it using a custom external template demonstrating the flexibility of custom directives with the Bootstrap UI.

Getting ready

As a starting point, we will use the generator-angm; the baseline code will be the default home directory.

At this point, we assume that you have the generator installed on your development environment and a project already started.

How to do it…

  1. Place the following highlighted code in the homeCtrl.js file in the home directory:
     * @ngdoc function
     * @name app.controller:HomeCtrl
     * @description
     * # HomeCtrl
     * Controller of the app
    // Passing the $modal to controller as dependency
    .controller('HomeCtrl', ['$scope', '$modal', function ($scope, $modal) {
      $scope.title = "Hello, Angm-Generator!";
      $ = function () {
        var modalInstance = ${
          templateUrl: 'myModalContent.html',
          controller: 'ModalCtrl'