title: ng-include changing behavior of angular-ui datepicker
body: <p>I was using ng-include on a few of my pages, however I had to stop using ng-include because it was breaking the angular-ui datepicker.   I opened this <a href="https://github.com/angular-ui/bootstrap/issues/2584" rel="nofollow noreferrer">Github bug</a>.</p>
  
  <p>I am wondering if anyone else was having issues with directives not functioning the same way when being used as part of a ng-include.</p>
  
  <p>Is there a way to make the datepicker work as expected as part of a ng-include?</p>
  
  <p>Here is a plunker showing how it is broken. <a href="http://plnkr.co/edit/AboEJGxAK3Uz76CfpaZ0?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/AboEJGxAK3Uz76CfpaZ0?p=preview</a></p>
  
  <p>Here is the html that works when on the view, but does not work when part of a ng include.</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col-md-2"&gt;
      &lt;p class="input-group"&gt;
        &lt;input type="text" class="form-control" datepicker-popup="yyyy/MM/dd" ng-model="something.dt2" is-open="secondCal"
           min-date="minDate" name="secondCal" max-date="'2015-06-22'" datepicker-options="dateOptions"
           date-disabled="disabled(date, mode)" ng-required="true" close-text="Close"/&gt;
          &lt;span class="input-group-btn"&gt;
            &lt;button type="button" class="btn btn-default" style="line-height: 1.2em" ng-click="open($event, 'secondCal')"&gt;
              &lt;i class="ss-icon ss-calendar"&gt;&lt;/i&gt;
            &lt;/button&gt;
          &lt;/span&gt;
      &lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the JS from the controller.</p>
  
  <pre><code>$scope.open = function ($event, elementOpened) {
        $event.preventDefault();
        $event.stopPropagation();
  
        $scope[elementOpened] = !$scope[elementOpened];
    };
  </code></pre>
  
  <p>And two ways I was doing ng-include</p>
  
  <pre><code>&lt;div ng-include src="'dist/partials/myPartial.html'"&gt;&lt;/div&gt;
  &lt;div ng-include="'dist/partials/myPartial.html'"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>Update</strong>
  I found that this is because the ng-include directive creates a new scope for each include.  <a href="https://stackoverflow.com/questions/12393703/how-to-include-one-partials-into-other-without-creating-a-new-scope">This SO post</a> creates a new directive that does the include without creating a new scope.  However there seems there "should" be a way to fix it without using a different include.</p>