AngularJS open modal on button click

Question

I am trying to learn to open a modal dialog box at the click of the button in AngularJS but unable to do so. I checked the chrome console but there are no errors. Also, sinc

Answer 1

Hope this will help you .

Here is Html code:-

    
    

      
Modal example
      Test Modal

      
        


        
      
    

AngularJs code:-

var mymodal = angular.module('mymodal', []);

mymodal.controller('MyController', function ($scope) {
    $scope.showModal = false;
    $scope.open = function(){
    $scope.showModal = !$scope.showModal;
    };
  });

mymodal.directive('modal', function () {
    return {
      template: '
' + 
          '
' + 
            '
' + 
              '
' + 
                '×' + 
                '
{{ title }}
' + 
              '
' + 
              '
' + 
            '
' + 
          '
' + 
        '
',
      restrict: 'E',
      transclude: true,
      replace:true,
      scope:true,
      link: function postLink(scope, element, attrs) {
        scope.title = attrs.title;

        scope.$watch(attrs.visible, function(value){
          if(value == true)
            $(element).modal('show');
          else
            $(element).modal('hide');
        });

        $(element).on('shown.bs.modal', function(){
          scope.$apply(function(){
            scope.$parent[attrs.visible] = true;
          });
        });

        $(element).on('hidden.bs.modal', function(){
          scope.$apply(function(){
            scope.$parent[attrs.visible] = false;
          });
        });
      }
    };
  });

Check this--jsfiddle