title: directive in nested ui-view called twice
body: <p>I'm using ui-router with components. The navigation is working great and the component $onInit is called once (as expected) but in the directive's $onInit (directive as element in component template) is being called twice.</p>
  
  <p>If I remove the ui-view attribute from the components template it is only called once. Not sure why that is.</p>
  
  <p><strong><em>First question</em></strong>: should I be using ui-view in the way I am? I want to be able to have nested routes so the parent state is preserved (manage users will be a grid and I want to preserve any sorting, paging, etc). I also want the child routes to replace the parent's DOM fragment.</p>
  
  <p><strong><em>Second question</em></strong>: why is the directive's $onInit being called twice?</p>
  
  <p><a href="http://plnkr.co/edit/rc8vbt?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/rc8vbt?p=preview</a></p>
  
  <p>My code looks like this:</p>
  
  <pre><code>var admin = {
    name: 'admin',
    abstract: true,
    url: '/Admin',
    template: `&lt;div ui-view=""&gt;&lt;/div&gt;`
  };
  var adminManageUsers = {
    name: 'admin.manageUsers',
    url: '/Users',
    component: 'manageUsers'
  };
  var adminAddUser = {
    name: 'admin.manageUsers.add',
    url: '/Add',
    component: 'addUser'
  };
  $urlRouterProvider.otherwise('/Admin/Users');
  $stateProvider
    .state(admin)
    .state(adminManageUsers)
    .state(adminAddUser);
  </code></pre>
  
  <p>and the components</p>
  
  <pre><code>app.component('manageUsers', {
    template: `&lt;div ui-view=""&gt;
      &lt;div&gt;Manage Users&lt;/div&gt;
      &lt;input type="button" value="Add User" ng-click="$muCtrl.addUser()" /&gt;
      &lt;test-directive&gt;&lt;/test-directive&gt;
    &lt;/div&gt;`,
    controller: adminManageUsersComponentController,
    controllerAs: '$muCtrl'
  });
  
  app.component('addUser', {
    template: `&lt;div ui-view=""&gt;
      &lt;div&gt;Add User&lt;/div&gt;
      &lt;input type="button" value="Manage Users" ng-click="$auCtrl.manageUsers()" /&gt;
    &lt;/div&gt;`,
    controller: adminAddUserComponentController,
    controllerAs: '$auCtrl'
  });
  </code></pre>
  
  <p><strong><em>EDIT</em></strong>:<br>
  I created another plnkr <a href="http://plnkr.co/edit/PZnA5h?p=preview" rel="nofollow noreferrer">here</a> that uses named views as detailed <a href="https://ui-router.github.io/guide/ng1/route-to-component" rel="nofollow noreferrer">here</a> (Named views/View targeting).
  Still the same issue :(</p>