Angular JS two way binding not working even with $rootScope

Question

I read other answers where two way binding was not working and it said it was because of inherited scope and then i changed my code to rootScope since rootScope is only one for the whole app. Now i am using a directive here please take a look at my code and tell me what is wrong with my code

.directive('homePage', function() {
  return {
    restrict: 'E',
    templateUrl: 'home-page.html',
    controller: function($http, $rootScope, $scope) {
      $rootScope.sbutton = false;
      var today = new Date();
      var dd = today.getDate();
      var mm = today.getMonth() + 1; //January is 0!
      var yyyy = today.getFullYear();
      if (dd < 10) {
        dd = '0' + dd
      }
      if (mm < 10) {
        mm = '0' + mm
      }

      today = yyyy + '-' + mm + '-' + dd;
      document.getElementById("datefield").setAttribute("min", today);

      //find function
      this.find = function() {
        $rootScope.dob = this.ldate;
        $rootScope.sbutton = true;
        var delay;
        if (latitude === undefined || latitude === undefined) {
          getLocation();
          delay = 6000;
        } else {
          delay = 0;
        }
        console.log("find run");
        //Validation Starts
        console.log(delay)
        setTimeout(function() {
          if (latitude === undefined || latitude === undefined) {
            alert("Please change your location settings to high accuracy mode");
            $rootScope.sbutton = false; //Doesn't work

            console.log($rootScope.sbutton);
          } else if ($rootScope.bgroup === undefined) {
            alert("Please Select ");
            $scope.sbutton = false; //Doesn't work

          } else if ($rootScope.dob === undefined) {
            alert("Please select a date");
            $scope.sbutton = false; //Doesn't work

          } else {
            //ajax start
            $scope.finderloader = true;

            console.log("Find run");
            $http({
              method: "POST",
              url: "URL",
              data: {
                //data i sent

              }
            }).then(function mySucces(response) {
              $scope.finderloader = false;
              $scope.search = false;
              $scope.myData = response.data.records;
              $scope.sbutton = false; //WORKS!

            }, function myError(response) {
              $scope.hellow = response.statusText;
              alert($scope.hellow);
              $scope.sbutton = false;

            });

            //ajax end 
          }

        }, delay);
      }
    },
    controllerAs: 'home'
  }
})

<div ng-init="search=true;">
  <div id="search" ng-show="search">
    <ons-scroller>
      <ons-list ng-controller="DialogController">
        <center><small>Request for blood</small>
        </center>

        <ons-list-item ng-click="show('abc.html')" tappable>
          <p>Select</p>
        </ons-list-item>

        <ons-list-item>
          <input placeholder="select date" id="datefield" ng-model="home.ldate" class="text-input text-input--transparent" type="text" onfocus="(this.type='date')" style="margin-top:8px; width: 100%;">

        </ons-list-item>
        <div class="content-padded">
          <ons-button modifier="large" ng-click="home.find()" ng-disabled="sbutton">
            Search
          </ons-button>
          {{sbutton}}
        </div>
      </ons-list>

    </ons-scroller>

  </div>
  <div ng-show="finderloader" class="spinner">

  </div>
  <div id="results" ng-hide="search">
    <ons-scroller>

      <ons-list ng-controller="DialogController">
        <ons-list-item modifier="tappable" ng-repeat="x in myData" tappable ng-click="getInfo(x.email);show('donor.html');">
          {{x.Name}}
          <br>{{x.gender}}
          <br>{{x.distance}} kilometer(s) away
        </ons-list-item>
      </ons-list>
    </ons-scroller>
  </div>

</div>

Thanks in advance :)

Answer 1

setTimeout doesn't understand angularjs digestion cycle, so use angularjs $timeout or $scope.apply

Answer 2

You don't need $rootScope for this, just use $timeout instead of setTimeout to trigger the digest event.

Angular services like $timeout and $http trigger this event when you use them. That's why it was working in $http resolve.