JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp">
    <ol>
        <li>If you press the button before the timeout, the div will be shown, and the value of food.foo will be locked as "pie".  When the timeout fires a few seconds later, the value will remain unchanged.</li>
        <li>BUT if you wait for 6 seconds and allow it to timeout before clicking the button, the timeout will indeed change the value of food.foo to be "cake".</li>
        <li> click "run" to retry.</li>
    </ol>
    <my-directive></my-directive>
</div>

JavaScript

myApp = angular.module("myApp", []);

food = {foo: "bananna", show: false};

myApp.directive("myDirective", function() {
    var d = {};
    d.restrict = "E";
    d.template = '<div ng-show="food.show">hi, I like <input type="text" ng-model="food.foo"> and, in case you forgot, that\'s {{food.foo}}</div><button ng-click="food.show = true">show me</button>';
    d.link = function(scope, element, attrs) {
        scope.food = food;
        setTimeout(function() {
            alert("timeout: setting food.foo = 'cake'");
            food.foo = "cake";
            scope.$apply();
        }, 6000);
    };
    return d;
});