How to populate Angularjs $scope variable in javascript?

Question

mapApp.controller("myController", function ($scope,$http) {
            $scope.namePlaceHolder= "Name";
            $scope.name = "";
};

I bound a scope variable to an html input as follows.

<input id="foo" type="text" placeholder="{{namePlaceHolder}}" ng-model="name" value="{{name}}"/>

If a user types something in text box the $scope.name property changes. But when I change it using javascript the $scope.name data doesn't change.

on(document.getElementById("button"), "click", function (e) {
        document.getElementById("foo").value = "ascd...";
})

This code does not populate $scope.name data.

Answer 1

Accesing scope from external element:

on(document.getElementById("button"), "click", function (e) {
            var scope = angular.element(document.getElementById("foo")).scope();
            scope.name = "hello, World!";
    })

Answer 2

Accessing and apply scope from external element:

JS:

on(document.getElementById("button"), "click", function (e) {
            var scope = angular.element(document.getElementById("foo")).scope();
            scope.name = "hello, World!";
            scope.$apply();
    })