angular 1 simple routing - data binding not working

Question

Im using angular 1 for the data binding from the form to the next view using the routing module to display the html structure form the different files, it i have all the html code in one file the prototype works perfect, but when i use the routing module the data is not binding through the links,

In the following link im using only css for the transitions so all the html is in one file and not using the routing module and there it works http://jspmultimedia.com/angular-cv-css/#form

and in the next link is where is not working using the routing module to pass the data from the form to be displayed in the next view. http://jspmultimedia.com/angular-cv-route/#!/form

var app = angular.module("myApp", ["ngRoute"]);
//Routing for display and URLS
app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        controller : 'myCtrl',
        templateUrl : 'dashboard.htm'
    })
    .when("/form", {
        controller : 'myCtrl',
        templateUrl : 'form.htm'    
    })
    .when("/result", {
        controller : 'myCtrl',
        templateUrl : 'resultdashboard.htm'
    })                      
    .otherwise({ redirectTo: 'dashboard.htm'});
});
//scope for select list (position)
app.controller('myCtrl', function($scope) {
    $scope.position = [
        "Front-end Web Developer",
        "Back-end Web Developer",
        "UI / UE Designer"
    ]
    //add skills
    $scope.skills = [];
    $scope.addItem = function () {
        $scope.skills.push($scope.addMe);
    }
    //remove skills
    $scope.removeItem = function (x) {
        $scope.skills.splice(x, 1);
    }  
});

this is the form.htm

<!-- FORM -->
<form id="form">
    <div class="form-group row"><!-- Name -->
        <label for="lgFormGroupInput" class="col-2 col-form-label col-form-label-lg">First Name(s)</label>
        <div class="col-10">
            <input type="text" ng-model="name" class="form-control form-control-lg" id="lgFormGroupInput" placeholder="John" value="Javier Smith Paterson">
        </div>
     </div>
    <div class="form-group row"><!-- Last Name -->
        <label for="lgFormGroupInput" class="col-2 col-form-label col-form-label-lg">Last Name(s)</label>
        <div class="col-10">
            <input type="text" ng-model="lastName" class="form-control form-control-lg" id="lgFormGroupInput" placeholder="Smith Paterson" value="Javier Smith Paterson">
        </div>
     </div>              

     <div class="form-group row"><!-- Short Description -->
        <label for="lgFormGroupInput" class="col-2 col-form-label col-form-label-lg">Cover Letter</label>
        <div class="col-10">
            <textarea ng-model="shortDescription" class="form-control" id="exampleTextarea" rows="3" placeholder="A Short description of what you can ofer"></textarea>
      </div>                  
    </div>

    <div class="form-group row"><!--  select Position to apply -->
        <label for="lgFormGroupInput" class="col-2 col-form-label col-form-label-lg">Position to Apply</label>
        <div class="col-10">
            <select ng-model="selectedPosition"  class="form-control form-control-lg">
                <option value="" selected disabled hidden>Choose here</option>
                <option ng-repeat="x in position" value="{{x}}">{{x}}</option>
            </select>
        </div>
    </div>
    <div class="form-group row"><!--  add skills -->
        <label for="lgFormGroupInput" class="col-2 col-form-label col-form-label-lg">Main Skills</label>
        <div class="col-4">
            <ul>
                 <li ng-repeat="x in skills" class="col-1">{{x}}<div class="col-1">
                        <span ng-click="removeItem($index)" style="cursor:pointer;">&times;</span>
                    </div>
                </li>

            </ul>
            <input class="form-control" ng-model="addMe">
            <button ng-click="addItem()" class="btn btn-primary">Add</button>                           
        </div>
        <div class="clearfix">
        </div>
        <div class="image-upload"> <!-- Image Upload preview -->
            <input type="file" class="form-control-file" onchange="readURL(this);" />
            <img id="preview-img" src="http://placehold.it/180" alt="your image" />
        </div>
    </div>  
    <!-- FINISH CTA-->
    <a href="#!result"class="btn btn-primary btn-lg text-center m-auto text-white">Finish</a>
</form>

and at last the resultdashboard.htm

<!-- Result dashboard CV -->
    <div id="resultDashboard">
    <div class="row col-12">
        <div class="col-3">
            <img src="http://placehold.it/18" class="rounded-circle" id="resDashImg" alt="photo image of {{name + " " + lastName}}" title="{{name + " "+ lastName}}">
        </div>
        <div class="col-6">
            <h1>{{ name + " " +lastName}}</h1>
            <p>{{shortDescription}}</p>
            <div class="text-center d-flex"><p>Applying for: </p><h3 class="ml-3">{{selectedPosition}}</h3></div>
        </div>
        <div class="col-3">
            <h3>Main Skills</h3>
            <ul>
                <li ng-repeat="x in skills"> {{x}}
                </li> 
            </ul>
        </div>
    </div>
</div>

i'm assuming i must be missing something with the controller if anyone can take a quick look please i would really appreciate it, the prototype is suppose to be a CV upload just to learn how to use angular 1 and then go ahead with other libraries, i think understanding the routing is a big step for me. anyways thank you.

Answer 1

Add the controller in your HTML - like ng-controller="myCtrl"