How to set value to $rootScope from text field on button click

Question

Following is what I want to do, in JavaScript style. At loading my html div (token) should show what ever value in $rootScope.token .Then when ever the button is pressed after typing text in input field (tokenInp), i need to update the $rootScope.token and also the displayed value in HTML.

document.getElementById("token").innerHTML = $rootScope.token;

function setToken(){
    $rootScope.token = document.getElementById("tokenInp").value;
    document.getElementById("token").innerHTML = $rootScope.token;
}

How to do this using AngularJS (im really new to it)

Answer 1

In your controller create a empty object and a method for setting the value

var token = {};

$scope.setToken = function(){
   $rootScope.token = token;
};

And in your html bind values to your textbox

<input type='text' ng-model='token' ng-click='setToken()'> </input>

Answer 2

In you Html

    <span ng-bind="token"></span>
   <input type='text' ng-model='tokenValue'> </input>
<input type="button" ng-click='modifiedTokenValue ()'/>

In you controller

 $scope.token = $rootScope.token;

 $scope.modifiedTokenValue = function(){
   $rootScope.token = $scope.tokenValue;
   $scope.token = $scope.tokenValue;
 };