title: angular-ui/ui-router, how do I inject partial view using $stateProvider?
body: <p>I am trying to inject a panel for editing, depending if the viewer is the owner, or not. Right now, I am having trouble just injecting the panel/partial view into the html. I want my compositions/views/view.html to be the 'base' html page, where the partial is injected in. Then the partial view is at compositions/views/partials/views.tools.html. Does anybody see something wrong with my $stateProvider that would explain why I cannot inject my partial into my views.html?</p>
  
  <p>Here is my $stateProvider: </p>
  
  <pre><code>$stateProvider
          .state('all compositions', {
              url: '/compositions/recent',
              templateUrl: 'compositions/views/list.html'
          }). 
            state('view', {
                  url: '/compositions/view/:compositionId',
                  views: {
                  'theTool':{
                   templateUrl:'compositions/views/partials/view.tool.html'   ,
                      controller: 'CompositionsController'
                  }
                  },
                  templateUrl: 'compositions/views/view.html',
                  controller: 'CompositionsController',
  
              }). //other states here
  </code></pre>
  
  <p>this is my markup for my view.html (main html)</p>
  
  <pre><code>&lt;div ui-view="theTool"&gt;&lt;/div&gt;
  &lt;section data-ng-controller="CompositionsController" data-ng-init="findOne()"&gt;
      &lt;h2&gt;{{composition.title}}&lt;/h2&gt;
      &lt;div ng-bind-html="trustedContent"&gt;&lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>Any help or advice is greatly appreciated. Thanks</p>