title: state provider and route provider in angularJS
body: <p>Below is my app.js file</p>
  
  <pre><code>angular
    .module('repoApp', [
      'ngAnimate',
      'ngAria',
      'ngCookies',
      'ngMessages',
      'ngResource',
      'ngRoute',
      'ngSanitize',
      'ngTouch',
      'ui.bootstrap',
      'ui.router'
    ])
    .config(function ($routeProvider) {
      $routeProvider
        .when('/', {
          templateUrl: 'views/main.html',
          controller: 'MainCtrl'
        })
        .when('/about', {
          templateUrl: 'views/about.html',
          controller: 'AboutCtrl'
        })
        .when('/login', {
          templateUrl: 'views/loginPage.html',
          controller: 'loginCtrl'
        })
        .otherwise({
          redirectTo: '/'
        });
    });
  angular
    .module('loginState',['ui.router']);
  </code></pre>
  
  <p>Below is my states file</p>
  
  <pre><code>angular
    .module('repoApp')
    .config(function ($stateProvider) {
  
        $stateProvider.state('home1', {
          url:'/home1',
          templateUrl: 'views/modals/test.html'
        })
        .state('secondState',{
          url:'/secondState',
          templateUrl: 'views/modals/secondStateTest.html'
        });
    });
  </code></pre>
  
  <p>The problem is, using my html i navigate to login page.</p>
  
  <pre><code>&lt;ul class="nav navbar-nav"&gt;
                &lt;li class="active"&gt;&lt;a href="#/"&gt;Home&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a ng-href="#/about"&gt;About&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a ng-href="#/"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                &lt;li class="loginShift"&gt;&lt;a ng-href="#/login"&gt;Login&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
  </code></pre>
  
  <p>but I am trying to hit the state as soon my flow hit the controller</p>
  
  <pre><code>angular.module('repoApp')
    .controller('loginCtrl', function ($scope,$modal,$state) {
      $scope.awesomeThings = [
        'HTML5 Boilerplate',
        'AngularJS',
        'Karma'
      ];
      $state.go('home1');
      $scope.openDialog = function () {
          $modal.open({
            keyboard: 'static',
            templateUrl: 'views/login/loginCred.html',
          });
        };        
    });
  </code></pre>
  
  <p>but I am not able to hit the home state.
  If I change my states file i.e </p>
  
  <pre><code>$stateProvider.state('home1', {
              url:'/login',
              templateUrl: 'views/modals/test.html'
            })
  </code></pre>
  
  <p>here I changed URL. It works fine now.</p>
  
  <p>I have a template from where I want to navigate to a next state</p>
  
  <pre><code>&lt;div&gt;
  &lt;button data-ng-click="openDialog()"&gt;open ME!&lt;/button&gt;
  &lt;div&gt;&lt;a ui-sref="secondState"&gt;click here&lt;/a&gt;&lt;/div&gt;
  &lt;/div
  </code></pre>
  
  <p>but as soon I click this anchor tag it navigates me back to home page. ie not to the state I intend to go.
  The main issue is URL(i guess) any help will be appreciated.</p>