title: Cannot get the modal pop up value in controller using Angular.js
body: <p>I could not get text field value present inside the modal pop up using Angular.js. I am providing my code below.</p>
  
  <p>view.html:</p>
  
  <pre><code>&lt;modal title="Driver Information" visible="showModal"&gt;
     &lt;div class="col-md-12"&gt;
              &lt;div class="form-group"&gt;
                  &lt;label&gt;Comment&lt;/label&gt;
                  &lt;textarea class="form-control" id="comment" rows="3" ng-model="comment"&gt;&lt;/textarea&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;button class="btn btn-success" id="singlebutton" ng-click="save();"&gt;Save&lt;/button&gt;
  &lt;div style="clear:both;"&gt;&lt;/div&gt;
  &lt;/modal&gt;
  </code></pre>
  
  <p>My controller page is given below.</p>
  
  <p>viewcontroller.js:</p>
  
  <pre><code>var dashboard=angular.module('easyride');
  dashboard.controller('viewcontroller',function($scope){
      $scope.save=function(){
         console.log('comment',$scope.comment);
      }
  })
  dashboard.directive('modal', function () {
      return {
        template: '&lt;div class="modal fade"&gt;' + 
            '&lt;div class="modal-dialog modal-lg"&gt;' + 
              '&lt;div class="modal-content"&gt;' + 
                '&lt;div class="modal-header"&gt;' + 
                  '&lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;' + 
                  '&lt;h4 class="modal-title"&gt;{{ title }}&lt;/h4&gt;' + 
                '&lt;/div&gt;' + 
                '&lt;div class="modal-body" ng-transclude&gt;&lt;/div&gt;' + 
              '&lt;/div&gt;' + 
            '&lt;/div&gt;' + 
          '&lt;/div&gt;',
        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;
            });
          });
        }
      };
    });
  </code></pre>
  
  <p>In the console message I am getting the <code>blank</code> value even I am entering some value in comment field and click on save button. Here I need to get the user typed the comment value after click on save button and once the value will be printed via console message the pop up should close.</p>