Create a basic modal in Angular using ui.bootstrap

basic-modal-in-angular-with-uibootstrap.md

• Install angular-bootstrap via bower bower install angular-bootstrap --save
• In app/scripts/app.js add ui.bootstrap as a dependency

angular
  .module('categoryManagerApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ui.tree',
    'ngMaterial',
    'angularSpinners',
    'ui.bootstrap' // <--- Add here
  ])

• Your tests will now be broken. In gulpfile.js add ui-bootstrap.js to the testRequire array.

testRequire: [
    'bower_components/angular/angular.js',
    'bower_components/angular-animate/angular-animate.js',
    'bower_components/angular-aria/angular-aria.js',
    'bower_components/angular-cookies/angular-cookies.js',
    'bower_components/angular-material/angular-material.js',
    'bower_components/angular-messages/angular-messages.js',
    'bower_components/angular-mocks/angular-mocks.js',
    'bower_components/angular-resource/angular-resource.js',
    'bower_components/angular-route/angular-route.js',
    'bower_components/angular-sanitize/angular-sanitize.js',
    'bower_components/angular-touch/angular-touch.js',
    'bower_components/angular-ui-tree/dist/angular-ui-tree.js',
    'bower_components/jquery/dist/jquery.js',
    'bower_components/bootstrap/dist/js/bootstrap.js',
    'bower_components/chosen/chosen.jquery.js',
    'bower_components/jquery.browser/dist/jquery.browser.js',
    'bower_components/angular-spinners/dist/angular-spinners.js',
    'bower_components/angular-bootstrap/ui-bootstrap.js',  // <--- Add here
    'test/mock/**/*.js',
    'test/spec/**/*.js'
  ],

• Run gulp test to ensure your tests still pass.
• Open an html view that you want to place your modal in. The view should have a controller bound to it.
• Place the following code in the html file:

<!-- Modals -->
<div class="modals">
  <!-- This script tag will contain your modal markup. -->
  <script type="text/ng-template" id="testModal.html">
    <div class="modal-header">
        <h3 class="modal-title" id="modal-title">I'm a modal!</h3>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" type="button" ng-click="modalOk()">OK</button>
        <button class="btn btn-warning" type="button" ng-click="modalCancel()">Cancel</button>
    </div>
  </script>
  
  <!-- This button tag will open the modal. -->
  <button type="button" class="btn btn-default" ng-click="modalOpen()">Open me!</button>
</div>

• Add $uibModal as a dependency in the controller.

angular.module('modalApp')
  .controller('ModalCtrl', ['$scope', '$uibModal', function ($scope, $uibModal) {
  
  }]);

• Define the modalOpen(), modalOk(), and modalCancel() functions in the controller scope.

angular.module('modalApp')
  .controller('ModalCtrl', ['$scope', '$uibModal', function ($scope, $uibModal) {
    $scope.modalOpen = function () {
      $scope.modalInstance = $uibModal.open({
        scope: $scope,
        templateUrl: 'testModal.html',
        animation: true
      });
    };

    $scope.modalOk = function(){
      // Do stuff
    };
    
    $scope.modalCancel = function(){
      this.modalInstance.dismiss();
    };
  }]);

The button should now open the modal. This is just a basic example to get you up and running. The full documentation can be found at https://angular-ui.github.io/bootstrap/