Arriver “n'a pas pu résoudre ... à partir de l'état ...” erreur lors de l'utilisation de imbriqués les itinéraires angularjs

Je suis nouveau sur angularjs et je veux utiliser imbriquée ui-itinéraires pour mon application. Quelques extraits de code ...

profile.html

<div class="row">
<div class="dl-horizontal" id="information">

    <div class="col-md-8 col-md-offset-2">

    <!-- edit button -->
    <div style="margin-bottom: 15px">   
        <div class="button" style="margin-top:5px" style="float:left">
            <button type="button" class="btn btn-primary" ui-sref="edit_profile" ng-click="populate()"><span class="glyphicon glyphicon-pencil"></span> Edit Profile</button>
        </div>
    </div>

client_UI.js

//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'
    })

edit.html

<script src="Scripts/angular-ui-bootstrap.js"></script>


    <!-- title -->
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h2 class="modal-title"> Editing Profile</h2>
    </div>

    <div class="modal-body">
        <form role="form" id="myForm">

            <!-- Name -->
        <div class="panel panel-default">
        <div class="panel-body">
            <div class="form-group">
                <label for="name">Name &nbsp;</label>
                <input placeholder="{{infos.Name}}" id="name" type="text" ng-model="name">
            </div>

profile.js

//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();

et c'est le point de vue (index.html) ...

       <!-- route veiw -->
    <div class="container" id="route" style="width:90%">
            <div ui-view></div>
    </div>

    <!-- Footer -->
    <footer></footer>

J'obtiens une erreur à partir de la console qui dit, n'a pas Pu résoudre "'edit_profile" de l'état "profil "" et edit.html est censé être l'enfant de l'état de profile.html. Je suis l'aide de l'interface utilisateur de routage dans angularjs. Je veux être en mesure de cliquer sur un bouton dans le profile.html que va changer l'état de edit_profile et sera affiché dans l'interface utilisateur-vue en index.html. Toutes les suggestions sur la façon de résoudre ce problème ou est-il un autre moyen facile de faire cela?