angularjs页面没有实时反馈值的改变

Question

1.html部分

    <div>
        {{one}}
        <button ng-click="testMe()">click</button>
    </div>

2.js部分

        $scope.all=[
            1,2,3,4,5,6,7,8,9,0
        ];
        $scope.testRand = function () {
            $scope.one = [];
            for(var i = 0;i < 2; i++){
                var index = Math.floor(Math.random() * 10);
                $scope.one[i] = $scope.all[index];
                console.log($scope.one[i]);
            }
            return $scope.one
        };
        $scope.testMe = function () {
            var timmer =  null;
            setTimeout ( function(){
                clearInterval(timmer)
            } , 1000 );
            timmer = setInterval ( function (){
                $scope.testRand1();
            },33)
        };

3.该部分代码理论上应该实现页面1s内动态随机内容的效果，但是实际效果是1s后才显示最终的值，这1s内变化的值都没有表现出来。
如何能实现1s内动态随机内容的效果？

Answer 1

偶然发现setInterval 和 setTimeout 在angular中不可用，分别替换成$interval 和 $timeout即可，具体原因未知。
故解决以上问题，需要把代码改成这样

$scope.all=[
            1,2,3,4,5,6,7,8,9,0
        ];
        $scope.testRand = function () {
            $scope.one = [];
            for(var i = 0;i < 2; i++){
                var index = Math.floor(Math.random() * 10);
                $scope.one[i] = $scope.all[index];
                console.log($scope.one[i]);
            }
            return $scope.one
        };
        $scope.testMe = function () {
            var timmer =  null;
            $timeout( function(){
                $interval.cancel(timmer)
            } , 1000 );
            timmer = $interval( function (){
                $scope.testRand1();
            },33)
        };

Answer 2

需要调用下$scope.$apply(),进入到angularjs上下文环境，它会执行脏值检测，会检测到值的改动，或者用$timeout，它会自动调用$apply()方法

Answer 3

之所以有一秒延迟是因为你使用的时候外部方法，如果你使用 $timeout就不会出现这个问题，或者你使用外部方法之后进行一下脏值检测。也就是在方法最后写一个 $scope.$apply()