JavascriptからAngularjsを制御したかったのですが、うまくいきませんでした。どのように変更したらよいでしょうか？

手動で「ま」を入力すると動くのですが、jsで「ま」を入力しても動きませんでした。

<!DOCTYPE html>
<html lang="ja" ng-app>
<head>
    <meta charset="UTF-8">
    <title>javascript⇒angularjs</title>
    <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
    <script>
    var mainCtrl = function($scope) {
        $scope.users = [
            {"name":"ここから"},
            {"name":"はじまる"},
            {"name":"まいれぼりゅーしょん"},
        ];
    }
    </script>
</head>
<body>
    <h1>Javascript⇒Angularjs</h1>
    <div ng-controller="mainCtrl">
    <p><input type="text" id="serch" ng-model="query" ></p>
    <ul>
    <li ng-repeat="user in users|filter:query|limitTo:3">
    {{user.name}}
    </li>
    </ul>
    </div>
    <button type="button" onclick="masao()">「ま」を入力</button>
    <script>
      function masao(){
        document.getElementById('serch').value="ま";
      }
    </script>
</body>
</html>