Angular js binding with normal html element

Question

I was trying angularjs bind functionality. I had one scenario where i have a form tag inside "ng-app" tag

<form name="CollectMFPToEvaluate" >
    <input type="text" name="name" ng-model="risk.name" ng-show="false">

</form>

In my app.js file i am writing a factory which will call a normal javascript function to set the value of name field

angularApp.factory('NameFactory', function(){
 return {
    bodyLoaded:function(){
       collectName();
    },
}; 
});

var collectName = function(){
    document.CollectMFPToEvaluate.name.value = "stackoverflow"; 
};

After i call my factory in apps.js i try to access the name variable app.js

$scope.risk = {
        name : '',

};

NameFactory.bodyLoaded();
     alert("risk = "+$scope.risk.name);

I am expecting the alert to print "risk = stackoverflow", but it prints "risk =". Am i missing something if so can anyone please correct me.

Thanks

Answer 1

Since your updating the view value directly you'll need to tell the angular world you've updated the view. If you run an apply in the factory that should fix it. Take a look at Angular Scope

angularApp.factory('NameFactory', function( $rootScope ){
   return {
      bodyLoaded:function(){
        $rootScope.$apply( collectName() );
      }
    }; 
});