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();
    })

Beside multiple other things. Here Prototypal Inheritance kicks in, which does overwrite your namePlaceholder property on the $scope object since your <form ...> does create a new $scope which inherits from your controller. Therefore you should always "use a dot".

E.g.

$scope.placeHolders = {
    name: "something"
};

and then

<input placeholder="{{placeholders.name}}">

Another thing is that you "left" the angular word when manipulating an angular variable outside of angular and therefore have to call angular.element(document.getElementById("foo")).scope().$apply(...) to "get back" in the angular world from your own JS.

But the better solution

mapApp.controller("myController", function ($scope,$http) {
    $scope.placeHolders = {
        name: 'Name'
    };
    $scope.selected = {
        name: ''
    };
    $scope.click = function() {
       $scope.selected.name = "something ...";
    };
};

<input ng-model="selected.name" placeholder="{{ placeHolders.name }}" ...>
<button ng-click="click()"></button>

DOM manipulations from within Angular should always come from directives - this allows for clean separation of code. In your case, you would never change the value attribute of that input, you would modify the ng-model so the changes will be reflected in your $scope variable.

So, in your above element of ID button, use an ng-click

ng-click="changeValue()"

//In controller
$scope.changeValue = function() {
    $scope.name = "ascd...";
}