Passing a javascript variable into a angularJS scope

If you have saved your username into sessionStorage like this:

window.sessionStorage.setItem("username","toby");

Then in a controller in angular you can:

$scope.username = window.sessionStorage.getItem("username"); (Edit: this will not bind username to the session storage)

Note: If you want to store JSON in session/local storage you should make it JSON beforehand:

window.sessionStorage.setItem("userObject", JSON.stringify(userObject));

And to retrieve:

var userObject = JSON.parse(window.sessionStorage.getItem("userObject"));

If you want to watch session storage you can use $watch:

$scope.$watch(
 function(){return window.sessionStorage.getItem("username");},
 function(newVal, oldVal){
 console.log("Username changed from", oldVal, "to", newVal);
 }
);

You might need to the angularJS $apply() function in order to get angular to respond to an updated value. Check out this useful article on $apply(). You need to call $apply() when you are making a change to the model that Angular isn't aware of (outside of an $http call, for example, for which Angular will automatically make an $apply() call). You should wrap your function inside the $apply() call, i.e.

$scope.$apply(function(var) {
 etc.
}

Additionally, to place a value in a controller into the model, assuming you are using a MVC framework, you need to have a model variable declared inside the controller. For example, you might have a controller that begins:

.controller("exampleCtrl", function($scope) {
 $scope.model = model;
}

Then, you can create/update a value in the model by calling

$scope.model.VALUENAME = whatever value

Hopefully this helps!

this worked for me:

// in the javascript only section call an angular method to update the data when OnClick, OnChange, etc....
angular.element(document.getElementById('YourElementId')).scope().update_your_value(); 

and

//inside the angular controller
$scope.update_your_value = function(){
 $scope.your_model.value = $('#YourElementId').val(); // or document.getElementById('YourElementId')).value
 $scope.$apply();
}

• javascript
• angularjs