title: JavaScript function not working after minification
body: <p>I am using a function to trigger a modal windows.</p>
  
  <p>The link:</p>
  
  <pre><code>&lt;a ng-click="toggleModal()" href&gt;complexity&lt;/a&gt;
  </code></pre>
  
  <p>toggles a boolean:</p>
  
  <pre><code>$scope.showModal = false;
    $scope.toggleModal = function(){
      $scope.showModal = !$scope.showModal;
    };
  </code></pre>
  
  <p>that triggers the modal window:</p>
  
  <pre><code>.directive('modal', function () {
      return {
        template: '&lt;div class="modal fade"&gt;' +
            '&lt;div class="modal-dialog"&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>Everything works fine as long as I don't minify the code. No errors from the console: <del>using some breakpoints I noticed that clicking on the link the value doesn't become true</del>. Any idea about why that's happening?</p>
  
  <p><strong>UPDATE 1</strong>: this is the minified bit of the directive above:</p>
  
  <pre><code>.directive("modal",function(){return{template:'&lt;div class="modal fade"&gt;&lt;div class="modal-dialog"&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:!0,replace:!0,scope:!0,link:["scope","element","attrs",function(a,b,c){a.title=c.title,a.$watch(c.visible,function(a){$(b).modal(a===!0?"show":"hide")}),$(b).on("shown.bs.modal",function(){a.$apply(function(){a.$parent[c.visible]=!0})}),$(b).on("hidden.bs.modal",function(){a.$apply(function(){a.$parent[c.visible]=!1})})}]}})
  </code></pre>
  
  <p>This is the toggle:</p>
  
  <pre><code>b.showModal=!1,b.toggleModal=function(){b.showModal=!b.showModal}
  </code></pre>
  
  <p><strong>UPDATE 2</strong>: I further tested the code adding an alert in the toggle function. The variable is actually toggled to true but the modal box does not appear.</p>