angularjs, uirouter – Update ng-model on controller update?

Issue

View 1:

<div ng-controller="ctrl1">
    <button ng-click="goToForm ({'name':'aaa'})">
    </button>
</div>

ctrl1:

    $scope.selectedList = {
        name: ""
    };

    $scope.goToForm = function(e) {
        $scope.selectedList.name = e.name;
        $state.go('view2');
        console.log(e); // prints updated value
    };

View 2:

<div ng-controller="ctrl1">

<input
        id="name"
        name="name"
        type="text"
        ng-model="selectedList.name"
        ng-readonly="true"
/>
</div>

But the input box is always empty, even though to get to the view the goToForm() is called. Why doesn’t it update the HTML value?
Views are changed with ui.router’s $state.

Solution

You are doing it wrong, you are changing the state so you must pass the data, else you’ll lose it.

$scope.goToForm = function(e) {
    var obj = {name: e.name};
    $state.go('view2',obj);
    console.log(e); // prints updated value
};

and do put one init function inside ctrl1.js which checks if there are any values passed as $stateParam. If there are any, assign it accordingly.

app.controller('ctrl1',function($stateParams){

init(); // your first line of controller

// then all your code from here

function init(){
   if($stateParams.name) {
        $scope.selectedList.name = $stateParams.name;
    }
 }

})

OR you can use ng-init="init()" on the <div ng-init="init()">

Answered By – Shashank Vivek

Answer Checked By – Dawn Plyler (AngularFixing Volunteer)