title: Getting "could not resolve ... from state ..." error when using nested routes angularjs
body: <p>I'm new to angularjs and I want to use nested ui-routes for my application. Some code snippets ... </p>
  
  <p>profile.html</p>
  
  <pre><code>&lt;div class="row"&gt;
  &lt;div class="dl-horizontal" id="information"&gt;
  
      &lt;div class="col-md-8 col-md-offset-2"&gt;
  
      &lt;!-- edit button --&gt;
      &lt;div style="margin-bottom: 15px"&gt;   
          &lt;div class="button" style="margin-top:5px" style="float:left"&gt;
              &lt;button type="button" class="btn btn-primary" ui-sref="edit_profile" ng-click="populate()"&gt;&lt;span class="glyphicon glyphicon-pencil"&gt;&lt;/span&gt; Edit Profile&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>client_UI.js</p>
  
  <pre><code>//object for routing
  var route = angular.module('route', ["ui.router"])
  
  // configure the routing        
  route.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
  
      // send to profile page
      $urlRouterProvider.otherwise("/profile");
  
      $stateProvider
  
      // route for personal info
      .state('profile', {
          url: "/profile", 
          templateUrl : "profile_area/profile.html" , 
          controller : 'profileController'
      })
  </code></pre>
  
  <p>edit.html</p>
  
  <pre><code>&lt;script src="Scripts/angular-ui-bootstrap.js"&gt;&lt;/script&gt;
  
  
      &lt;!-- title --&gt;
      &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
          &lt;h2 class="modal-title"&gt; Editing Profile&lt;/h2&gt;
      &lt;/div&gt;
  
      &lt;div class="modal-body"&gt;
          &lt;form role="form" id="myForm"&gt;
  
              &lt;!-- Name --&gt;
          &lt;div class="panel panel-default"&gt;
          &lt;div class="panel-body"&gt;
              &lt;div class="form-group"&gt;
                  &lt;label for="name"&gt;Name &amp;nbsp;&lt;/label&gt;
                  &lt;input placeholder="{{infos.Name}}" id="name" type="text" ng-model="name"&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>profile.js</p>
  
  <pre><code>//object for routing
  var route = angular.module('route', ["ui.router"])
  
  // configure the routing        
  route.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
  
  $stateProvider
  
  //route for edit page
  .state('edit_profile', {
      url: "/edit_profile",
      templateURL : "edit/edit_profile.html" ,
      controller : 'editController'
  })
  });
  
  route.controller('editController' ["$scope", "$resource", function($scope, $resource) {
  
  // resource objects
  var profile = $resource($scope.apicall + "/api/userprofile/", {Userid:$scope.userid}, {'post':{method: 'POST'}});
  var edit = new profile();
  </code></pre>
  
  <p>and this is the view (index.html) ...</p>
  
  <pre><code>       &lt;!-- route veiw --&gt;
      &lt;div class="container" id="route" style="width:90%"&gt;
              &lt;div ui-view&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- Footer --&gt;
      &lt;footer&gt;&lt;/footer&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>I'm getting an error from the console that says, Could not resolve "'edit_profile' from state 'profile'" and edit.html is supposed to be the child state of profile.html. I'm using ui-routing in angularjs. I want to be able to click a button in the profile.html that will change the state to edit_profile and will be displayed in the ui-view in index.html. Any suggestions on how to fix this or is there another easy way to do this?</p>