Bootstrap 3 + AngularJS - Modal example

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<div ng-controller="MainCtrl" class="container">
  <button ng-click="toggleModal()" class="btn btn-default">Open modal</button>
    
  <modal title="Login form" visible="showModal">
    <form role="form">
      <textarea ng-model="modal.content" ng-change="statusChange(content)" placeholder="update" required="required"></textarea>
      <button ng-click="closeAndReset()" type="submit" class="btn btn-default">Submit</button>
    </form>
  </modal>
</div>

JavaScript

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

mymodal.controller('MainCtrl', function ($scope) {
    $scope.modal = {
        content: ""
    }
    $scope.showModal = false;
    $scope.toggleModal = function(){
        $scope.showModal = !$scope.showModal;
    };
    
    $scope.reset = function(){
        $scope.modal.content = "";
    }
    
    $scope.closeAndReset = function(){
        console.log($scope.modal.content);
        $scope.reset();
        $scope.toggleModal();
        console.log($scope.modal.content);
    }
    
    $scope.statusChange = function(content){
        //$scope.content = content;
    }
  });

mymodal.directive('modal', function () {
    return {
      template: '<div class="modal fade">' + 
          '<div class="modal-dialog">' + 
            '<div class="modal-content">' + 
              '<div class="modal-header">' + 
                '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' + 
                '<h4 class="modal-title">{{ title }}</h4>' + 
              '</div>' + 
              '<div class="modal-body" ng-transclude></div>' + 
            '</div>' + 
          '</div>' + 
        '</div>',
      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;
          });
        });
      }
    };
  });