Angular JS $interval

Eh, $timeout & $interval are kinda cool, no need to update using $apply

HTML

<div ng-app="timerApp" ng-controller="timerController">
    <button ng-hide="clickedStartButton" ng-click="setText()">Click here for the message</button>
    <button ng-show="clickedStartButton" ng-click="log(text)">{{text}}</button>    
</div>

JavaScript

angular.module('timerApp', ['timerApp.controllers']);
angular.module('timerApp.controllers', []).controller('timerController', ['$scope', '$interval', '$timeout', function ($scope, $interval, $timeout) {
    $scope.anim = {};
    $scope.text = null;
    $scope.clickedStartButton = false;
    $scope.setText = function () {
        $scope.text = 'this is text (click me!)';
        $scope.clickedStartButton = true;
    }

    $scope.anim.started = false;
    $scope.log = function (message) {
        if (!$scope.anim.started) {
            $scope.anim.started = true;
            var textAnim;
            var extra_text = "... and this is all very new!";
            var index = 0;
            var intervalPeriod = 100;
            textAnim = $interval(function (index) {
                if (index == (extra_text.length)) {

                    $interval.cancel(textAnim);
                    textAnim = $timeout(function () {
                        $scope.text = 'done!';
                    }, 1000);

                } else {
                    $scope.text += extra_text[index++];
                }
            }, intervalPeriod);
        }
    }
}]);