title: How to redirect to new state in Angularjs?
body: <p>Hi I am developing SPA application in Angularjs. This is my first application in Angularjs. I have two master pages. In first master page there is one tab when i click on that tab i want to redirect to another master page. I am using UI routing in Angularjs. I completed Login and registration modules but these modules should come in second master page but i have it in first master page now. </p>
  
  <p>Below is my index.html first master page file.</p>
  
  <pre><code>&lt;ul id="nav"&gt;
    &lt;li&gt;&lt;a ui-sref="Registration.mainRegistration"&gt;{{ 'Registration' | translate }}&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a ui-sref="Registration.Login"&gt;Login&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;{{ 'Careers' | translate }}&lt;/a&gt; &lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;{{ 'Offers &amp; Deals' | translate }}&lt;/a&gt; &lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;{{ 'Financial' | translate }}&lt;/a&gt; &lt;/li&gt;
  </code></pre>
  
  <p>This is the first page loads. There is one Financial tab in the above file. When i click on that tab all my above master page disappears and in that place new master page should come. 
  Below is my App.js</p>
  
  <pre><code> var app = angular.module('RoslpApp', ['pascalprecht.translate', 'ui.router', 'toastr']);
     app.config(function ($stateProvider,
                          $urlRouterProvider, 
                          $translateProvider, 
                          $translatePartialLoaderProvider) {
  
       $stateProvider
         .state('Registration', {
         abstract: true,
         url: '/Registration',
         templateUrl: 'Registration/placeholder.html',
         controller: 'MainRegistration'
       });
      //there are other states also.
  </code></pre>
  
  <p>I am in the initial stage of development. So May I know this can be achieved? Any help would be appreciated. Thank you. </p>