title: Angular.js: change internal view of a template
body: <p>I have this html pages:</p>
  
  <p>dashboard.html</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
          &lt;div class="box"&gt;
              &lt;div class="row row-offcanvas row-offcanvas-left"&gt;
                  &lt;dashboard-sidebar&gt;&lt;/dashboard-sidebar&gt;
                  &lt;div class="column col-sm-10 col-xs-11" id="main"&gt;
                      &lt;div class="padding" ui-view="main-view"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>With this i change the template on "main-view" element:</p>
  
  <pre><code>angular.module("gecoDashboard", ["gecoDashboardGui", "gecoDashboardHome", "gecoDashboardBlog", "ui.router"])
  .config(function ($stateProvider, $urlRouterProvider) {
      $urlRouterProvider.otherwise('/');
      $stateProvider
          .state('home', {
              url: '/',
              views: {
                  'main-view': {
                      templateUrl: 'dashboard-home-view.html',
                  }
              },
              title: "Home"
          })
          .state('blog', {
              url: '/blog',
              views: {
                  'main-view': {
                      templateUrl:dashboard/views/dashboard-blog-view.html',
                  },
              },
              title: "Articoli"
          })
  })
  .run(['$location', '$rootScope', function ($location, $rootScope) {
      $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
          if (toState.hasOwnProperty('title')) {
              $rootScope.title = toState.title;
          }
      });
  }]);
  </code></pre>
  
  <p>My question is: if my template on "main-view" is like this:</p>
  
  <pre><code>&lt;h1&gt;Section Title&lt;/h1&gt;
  &lt;div class="row" ui-view="blog-view"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>How i can change a template on "blog-view"?</p>