• Now, let’s add the modal controller. For the example code, we use the same homeCtrl.js file to hold all the code examples. However, in production applications, you must, or at least should, have one controller for each goal. Let’s go to the second step and add the ModaCtrl function:
    // Passing $modalInstance to controller as dependency
    .controller('ModalCtrl', function ($scope, $modalInstance) {
    
      // Added some content to Modal using $scope
      $scope.content = "ModalCtrl, Yeah!"
    
      // Add cancel button
      $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
      };
    })

 

  • Note that we have appended this controller to the homectrl.js file. Now, let’s add the modal HTML content to the home.html file inside the home directory. Add the following highlighted code:
    <div ng-controller="HomeCtrl">
      <div class="splash" style="width:600px; margin:0 auto; text-align:center">
          <h1>{{ title }}</h1>
          <p>This is a template for a simple home screen website. Use it as a starting point to create something more unique.</p>
          <code>app/home/home.html</code>
          <hr>
          <p><a ng-click="open()" class="btn btn-primary" role="button">Open Modal »</a></p>
      </div>
      <!-- Modal Script -->
      <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h3 class="modal-title">Hello from Modal!</h3>
        </div>
        <div class="modal-body">
          Modal Content from: <b>{{ content }}</b>
        </div>
        <div class="modal-footer">
          <button class="btn btn-danger" ng-click="cancel()">Cancel</button>
        </div>
      </script>
    </div>