Update not work to async in angularjs

by Jonatas Piazzi

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular-animate.js"></script>
<div ng-app="myApp" ng-controller="SampleController">
    <p>{{val1}}</p>
    <p>{{val2}}</p>
    <input type="button" value="Update" ng-click="update()" />
</div>

JavaScript

var app = angular.module('myApp', []);

app.controller('SampleController', ['$scope', function($scope) {

    $scope.val1 = "Not updated";
    $scope.val2 = "Not updated";

    $scope.update = function () {
        $scope.val1 = "Updated outside!";

        setTimeout(function () {
            $scope.val2 = "Update inside!";
            $scope.$apply();
        }, 1);
    };
}]);