Angular Material app - delayed changes
<p>I was developing a simple stopwatch app using AngularJS + Angular Material + Electron, and somehow the data changes/watches were being delayed, until another UI interaction takes place (?) This had never happened before when I was using Bootstrap, and I can confirm it is not Electron that is the issue.</p>

<p>As I'm starting out today with these, I've made use of latest versions of AngularJS, Angular Material and Electron, all pulled with Bower.</p>

<p><strong>EDIT: Here's the pen: <a href="http://codepen.io/anon/pen/jWgzev" rel="nofollow noreferrer">http://codepen.io/anon/pen/jWgzev</a></strong></p>

<p>Here's where the app starts:</p>

<p><a href="https://i.stack.imgur.com/zwdih.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zwdih.jpg" alt="start"></a></p>

<p>Upon pressing the play button, the timer starts counting down to zero, and the play button gets replaced:</p>

<p><a href="https://i.stack.imgur.com/BZhY4.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BZhY4.jpg" alt="then"></a></p>

<p>And when the timer hits zero, the button should have been replaced by an orange stop button, and yet it does not happen:</p>

<p><a href="https://i.stack.imgur.com/AL5PO.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AL5PO.jpg" alt="enter image description here"></a></p>

<p>And when you hover your mouse over one of the two buttons on screen, the gray button magically transforms to orange:</p>

<p><a href="https://i.stack.imgur.com/Kq3hj.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Kq3hj.jpg" alt="enter image description here"></a></p>

<p>I apologize in advance if I'm posting blocks of code, I just don't know where the problem is.</p>

<p>HTML:</p>

<pre><code>&lt;!doctype html&gt;
&lt;html class="no-js" lang="" ng-app="breaktime-stopwatch"&gt;
    &lt;head&gt;
        &lt;meta charset="utf-8"&gt;
        &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;meta name="description" content=""&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
        &lt;link rel="apple-touch-icon" href="apple-touch-icon.png"&gt;

        &lt;link rel="stylesheet" href="styles/normalize.min.css"&gt;
        &lt;link rel="stylesheet" href="styles/main.css"&gt;
        &lt;link rel="stylesheet" href="styles/font-awesome.min.css"&gt;
        &lt;link href="./bower_components/angular-material/angular-material.css" rel="stylesheet" /&gt;
        &lt;link rel="stylesheet" href="styles/app.css"&gt;

        &lt;!--&lt;script src="scripts/vendor/modernizr-2.8.3.min.js"&gt;&lt;/script&gt;--&gt;
        &lt;script&gt;
            window.nodeRequire = require;
            delete window.require;
            delete window.exports;
            delete window.module;
        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body ng-controller="AppController as vm" layout="column"&gt;
        &lt;md-toolbar layout="row"&gt;
            &lt;div class="md-toolbar-tools"&gt;
                &lt;span&gt;
                    &lt;h1 class="md-title"&gt;Breaktime Stopwatch&lt;/h1&gt;
                &lt;/span&gt;
                &lt;!-- fill up the space between left and right area --&gt;
                &lt;span flex&gt;&lt;/span&gt;
                &lt;md-button href="" class="md-icon-button"&gt;
                    &lt;md-icon md-font-icon='fa fa-question-circle fa-2x'&gt;&lt;/md-icon&gt;
                    &lt;md-tooltip md-direction="left"&gt;
                        About and Help
                    &lt;/md-tooltip&gt;
                &lt;/md-button&gt;
            &lt;/div&gt;
        &lt;/md-toolbar&gt;
        &lt;md-content layout="column" layout-padding&gt;
            &lt;div flex layout="row" layout-align="center center"&gt;
                &lt;!--&lt;md-progress-circular md-mode="indeterminate" md-diameter="50"&gt;&lt;/md-progress-circular&gt;--&gt;
                &lt;!--&lt;md-progress-circular md-mode="determinate" ng-value="meter" md-diameter="50"&gt;&lt;/md-progress-circular&gt;--&gt;
                &lt;timer class="clock md-display-4" autostart="false" interval="1000" countdown="break_duration" finish-callback="stopTimer()"&gt;{{minutes}}:{{seconds}}&lt;/timer&gt;

            &lt;/div&gt;
            &lt;div layout="row" layout-align="center center"&gt;
                &lt;span ng-if="playButton"&gt;
                    &lt;md-button class="md-fab md-primary" aria-label="Play" ng-click="startTimer()"&gt;
                        &lt;md-icon md-font-icon='fa fa-play fa-2x'&gt;&lt;/md-icon&gt;
                        &lt;md-tooltip md-direction="top"&gt;
                            Start
                        &lt;/md-tooltip&gt;
                    &lt;/md-button&gt;
                &lt;/span&gt;
                &lt;span ng-if="stopEarlyButton"&gt;
                    &lt;md-button class="md-fab md-accent" aria-label="Stop Earlier" ng-click="stopEarlyTimer()"&gt;
                        &lt;md-icon md-font-icon='fa fa-stop fa-2x'&gt;&lt;/md-icon&gt;
                        &lt;md-tooltip md-direction="top"&gt;
                            Stop
                        &lt;/md-tooltip&gt;
                    &lt;/md-button&gt;
                &lt;/span&gt;
                &lt;span ng-if="stopButton"&gt;
                    &lt;md-button class="md-fab md-warn"  aria-label="Stop" ng-click="stopTimer()"&gt;
                        &lt;md-icon md-font-icon='fa fa-exclamation fa-2x'&gt;&lt;/md-icon&gt;
                        &lt;md-tooltip md-direction="top"&gt;
                            Stop
                        &lt;/md-tooltip&gt;
                    &lt;/md-button&gt;
                &lt;/span&gt;
            &lt;/div&gt;
        &lt;/md-content&gt;





        &lt;!--[if lt IE 8]&gt;
            &lt;p class="browserupgrade"&gt;You are using an &lt;strong&gt;outdated&lt;/strong&gt; browser. Please &lt;a href="http://browsehappy.com/"&gt;upgrade your browser&lt;/a&gt; to improve your experience.&lt;/p&gt;
        &lt;![endif]--&gt;
        &lt;!--pre-dependencies--&gt;

        &lt;script src="scripts/plugins.js"&gt;&lt;/script&gt;
        &lt;!--dependencies--&gt;
        &lt;script src="./bower_components/jquery/dist/jquery.min.js" type="text/javascript" &gt;&lt;/script&gt;        
        &lt;script src="./bower_components/angular/angular.js" type="text/javascript" &gt;&lt;/script&gt;
        &lt;script src="./bower_components/angular-animate/angular-animate.js" type="text/javascript" &gt;&lt;/script&gt;
        &lt;script src="./bower_components/angular-aria/angular-aria.js" type="text/javascript" &gt;&lt;/script&gt;
        &lt;script src="./bower_components/angular-material/angular-material.js" type="text/javascript" &gt;&lt;/script&gt;
        &lt;script src="./bower_components/momentjs/min/moment.min.js" type="text/javascript" &gt;&lt;/script&gt;
        &lt;!--&lt;script src="./bower_components/momentjs/min/locales.min.js" type="text/javascript" &gt;&lt;/script&gt;--&gt;
        &lt;script src="./bower_components/humanize-duration/humanize-duration.js" type="text/javascript" &gt;&lt;/script&gt;
        &lt;script src="./bower_components/angular-timer/dist/angular-timer.min.js" type="text/javascript" &gt;&lt;/script&gt;
        &lt;!--application config--&gt;
        &lt;script src="scripts/app.js"&gt;&lt;/script&gt;
        &lt;!-- Google Analytics: change UA-XXXXX-X to be your site's ID. --&gt;
        &lt;!--&lt;script&gt;
            (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
            function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
            e=o.createElement(i);r=o.getElementsByTagName(i)[0];
            e.src='//www.google-analytics.com/analytics.js';
            r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
            ga('create','UA-XXXXX-X','auto');ga('send','pageview');
        &lt;/script&gt;--&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>JS:</p>

<pre><code>(function () { 

    'use strict'; 

    var btsw = angular.module('breaktime-stopwatch', [
        'ngMaterial',
        'timer'
    ]);

    btsw.config(function($mdThemingProvider) {
        $mdThemingProvider.theme('default')
            .primaryPalette('indigo')
            .accentPalette('grey');
    });

    btsw.controller('AppController', function AppController($scope, $mdDialog){
        $scope.timerRunning = false;
        $scope.playButton = true;
        $scope.stopEarlyButton = false;
        $scope.stopButton = false;
        $scope.break_duration = 10; 
        $scope.break_var = angular.copy($scope.break_duration);
        // $scope.meter = 0;

        $scope.startTimer = function (){
            $scope.$broadcast('timer-start');
            $scope.timerRunning = true;
            $scope.playButton = false;
            $scope.stopEarlyButton = true;
        };

        $scope.stopEarlyTimer = function (){
            $scope.$broadcast('timer-stop');
            $scope.timerRunning = false;
            $scope.playButton = true;
            $scope.stopEarlyButton = false;
        };

        $scope.stopTimer = function (){
            $scope.stopEarlyButton = false;
            $scope.$broadcast('timer-stop');
            $scope.timerRunning = false;
            $scope.playButton = false;
            $scope.stopEarlyButton = false;
            $scope.stopButton = true;
        };

        $scope.test = function(){
            console.log($scope.break_duration);
            console.log($scope.break_var);
            // console.log($scope.meter);
        }

        $scope.$on('timer-tick', function (event, data) {
                $scope.break_var = data.millis/1000;

                // if($scope.meter &lt; Math.round(100-(($scope.break_var/$scope.break_duration)*100)))
                // {$scope.meter = Math.round(100-(($scope.break_var/$scope.break_duration)*100));}
                // console.log($scope.meter);
        });

    });
})();
</code></pre>

<p>Any kind of help that will point me to the right direction will be greatly appreciated!</p>