title: ng-click inside a modal window
body: <p>Form displays properly in a modal window, but the ng-click doesn't seem to have any effect when clicked to display the angular datepicker inside the modal.</p>
  
  <p>Should the   ng-click="vm.toggle($event, 'startOpen', event)"   syntax be different when in a modal? It works perfectly when the form is displayed on a webpage (not in a modal).</p>
  
  <p>Solutions I found on stackoverflow didn't work.</p>
  
  <p>See code below or plunker version: <a href="http://plnkr.co/nXJ0SKzDemrhvgWyfue5" rel="nofollow">http://plnkr.co/nXJ0SKzDemrhvgWyfue5</a></p>
  
  <p>html</p>
  
  <pre><code>&lt;script type="text/ng-template" id="modalEventContent.html"&gt;
  &lt;div class="modal-body" style="height:600px;"&gt;
  &lt;table class="table table-bordered"&gt;
  
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Title&lt;/th&gt;
      &lt;th&gt;Type&lt;/th&gt;
      &lt;th&gt;Starts at&lt;/th&gt;
      &lt;th&gt;Ends at&lt;/th&gt;
      &lt;/tr&gt;
  &lt;/thead&gt;
  
  &lt;tbody&gt;
  
      &lt;td&gt;&lt;input type="text" class="form-control" ng-model="vm.event.title"&gt;&lt;/td&gt;
      &lt;td&gt;
        &lt;select ng-model="vm.event.type" class="form-control"&gt;
          &lt;option value="important"&gt;Important&lt;/option&gt;
          &lt;option value="warning"&gt;Warning&lt;/option&gt;
          &lt;option value="info"&gt;Info&lt;/option&gt;
          &lt;option value="inverse"&gt;Inverse&lt;/option&gt;
          &lt;option value="success"&gt;Success&lt;/option&gt;
          &lt;option value="special"&gt;Special&lt;/option&gt;
        &lt;/select&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;p class="input-group" style="max-width: 250px"&gt;
          &lt;input type="text" class="form-control" readonly datepicker-popup="medium" ng-model="vm.event.startsAt" is-open="vm.event.startOpen" close-text="Close" /&gt;
          &lt;span class="input-group-btn"&gt;
            &lt;button type="button" class="btn btn-default" ng-click="vm.toggle($event, 'startOpen', vm.event)"&gt;&lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt;&lt;/button&gt;
          &lt;/span&gt;
        &lt;/p&gt;
        &lt;timepicker ng-model="vm.event.startsAt" hour-step="1" minute-step="15" show-meridian="true"&gt;&lt;/timepicker&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;p class="input-group" style="max-width: 250px"&gt;
          &lt;input type="text" class="form-control" readonly datepicker-popup="medium" ng-model="vm.event.endsAt" is-open="vm.event.endOpen" close-text="Close" /&gt;
          &lt;span class="input-group-btn"&gt;
            &lt;button type="button" class="btn btn-default" ng-click="vm.toggle($event, 'endOpen', vm.event)"&gt;&lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt;&lt;/button&gt;
          &lt;/span&gt;
        &lt;/p&gt;
        &lt;timepicker ng-model="vm.event.endsAt" hour-step="1" minute-step="15" show-meridian="true"&gt;&lt;/timepicker&gt;
      &lt;/td&gt;
  
  &lt;/tbody&gt;
  
  &lt;/table&gt;
  &lt;/div&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>sample of code in my demo.js</p>
  
  <pre><code>function showEventModal(action, event) {
    $modal.open({
      templateUrl: 'modalEventContent.html',
      controller: function() {
        var vm = this;
        vm.action = action;
        vm.event = event;
      },
      controllerAs: 'vm'
    });
  }  
  
  
  vm.eventEdited = function(event) {
  
   $http.get('/api/events/' + event.eventid).success(function(eventsuccess){
   showEventModal('Edited', event);
  
  }).error(function(err){
     /* do something with errors */
  });
    //console.log("eventEdited");
  };
  
  vm.toggle = function($event, field, event) {
    $event.preventDefault();
    $event.stopPropagation();
    vm.event[field] = !vm.event[field];
  };
  </code></pre>
  
  <p><strong>* Update *</strong></p>
  
  <p>showEventModal function was updated as per @RomanKoliada suggestion to add vm.toggle function inside the controller, but problem wasn't solved :</p>
  
  <pre><code>function showEventModal(action, event) {
    $modal.open({
      templateUrl: 'modalEventContent.html',
      controller: function() {
        var vm = this;
        vm.action = action;
        vm.event = event;
  
        vm.toggle = function($event, field, event) {
              $event.preventDefault();
              $event.stopPropagation();
              event[field] = !event[field];
          };
      },
      controllerAs: 'vm'
    });
  }
  </code></pre>
  
  <p><strong>* Final Update (solution) *</strong></p>
  
  <p>Thanks to @RomanKoliada, a solution was found. Code above has been updated with the solution below</p>
  
  <p>In demo.js, this line was changed from:</p>
  
  <pre><code>event[field] = !event[field];
  </code></pre>
  
  <p>to</p>
  
  <pre><code>vm.event[field] = !vm.event[field];
  </code></pre>
  
  <p>In html, is-open was changed from:</p>
  
  <pre><code>is-open="event.startOpen"
  </code></pre>
  
  <p>to</p>
  
  <pre><code>is-open="vm.event.startOpen"
  </code></pre>