title: Replace self partial with another partial with angularjs ui router
body: <p>In the customers view I have a create customer button which should load a <code>customers.create.html</code> partial view where the <code>customers.html</code> is positioned.</p>
  
  <p>How can the current view <code>"customers.html"</code> be replaced by another view <code>"customers.create.html"</code> ?</p>
  
  <p><strong>customers.html</strong></p>
  
  <pre><code>&lt;div&gt;
      &lt;button ng-click="create()" class="btn btn-default" ui-sref="customers.create"&gt;Create&lt;/button&gt;
  &lt;/div&gt;
  &lt;div style="height:500px;" ng-grid="myOptions"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>$stateProvider
              .state('customers', {
                  url: "/customers",
                  templateUrl: "../views/customers.html",
                  controller:  ['$scope', '$stateParams', '$state',
                      function (  $scope,   $stateParams,   $state){ 
                 }]
              })
      .state('customers.create', {
                      url: "/create",
                      templateUrl: "../views/customers.create.html"
                  })
  </code></pre>
  
  <p>At the moment when the create button is clicked the route changes to /customers/create but not the html view it just stays the same.</p>
  
  <p>I can not put the <code>&lt;div ui-view&gt;&lt;/div&gt;</code> under the create button because then the customers datagrid and the create button would still be visible.</p>
  
  <p>Maybe I should not use a hierarchical customers.create view ?</p>