Do initial setup and allow changes later in Angular app

1

I am building an app and I have the following scenario:

I have one state that needs to take an input from a text box, put it
in a local storage variable, put it in an in another state, and set it
as the value in a text box in the third state.

My controller looks like this:

angular.module("controllers", ['ionic', 'ngCordova'])
.controller("appCtrl", function($scope){
    var name = angular.element('.name').val();
    window.localStorage["name"] = name;
    angular.element('h1').text(name);
    angular.element('.other-input').val(name);
})

I also tried it the traditional $scope way, and it continued to fail:

<input ng-value="name" ng-model="name">
<h1>{name}</h1>

I would love to hear your suggestions.

Thank you.

2

You could define a service to set and access your variable, this way you could hide the details to your controllers and states, so reducing coupling between them.