title: Parent state also calling while child state loading
body: <p>app.js   </p>
  
  <pre><code> var myapp = angular.module('myapp', ['ui.router']);
  
      itaasContentApp.config(function($stateProvider, $urlRouterProvider) {
  
          $urlRouterProvider.otherwise('/404');
  
          $stateProvider.state('parent', {
              url:'/parent',
              templateUrl :'partials/parent.html',
              controller:'parentCtrl'
          })
            .state('parent.child',{
              url:'/child',
              templateUrl :'partials/child.html',
              controller  :'childCtrl'
          });
  </code></pre>
  
  <p>parent.html</p>
  
  <pre><code>&lt;div ui-view&gt;
  
  &lt;table data-ng-init='init()'&gt;
  
  &lt;/table&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>child.html</p>
  
  <pre><code>&lt;div &gt;
  
  &lt;table data-ng-init='init()'&gt;
  
  &lt;/table&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>parentCtrl</p>
  
  <pre><code>app.controller('parentCtrl', function($scope,$state) {
  
  $scope.init=function()
  {
  //it will initialize the controller &lt;html data-ng-init='init()'&gt;
  }
  //I am calling child state
  $state.go("parent.child");
  
  });
  </code></pre>
  
  <p>childCtrl</p>
  
  <pre><code> app.controller('childCtrl', function($scope,$state) {
  
      $scope.init=function()
      {
      //it will initialize the controller &lt;html data-ng-init='init()'&gt;
  
      }
  
  
      });
  </code></pre>
  
  <p><strong>Problem:</strong>
  While loading the child state init method parent init method also calling</p>
  
  <p>init() of parent
  then 
  init() of child</p>
  
  <p>can you please explain me where i did wrong </p>