title: Why Angularjs only runs after scrolling the screen on iphone safari
body: <p>I am building a web application and make it responsive, it work fine in chrome either on desktop and mobile, but safari is so tricky that angularjs code only run after you scroll the screen a little bit down, i can't find any answer on the website.</p>
  
  <p>the code is simple I just want some doms to show or not to show when the device screen is within a range, but somehow not work on safari iphone</p>
  
  <pre><code>    app.controller('searchCtrl', ['$scope', function ($scope) {
  
  
    (function init(){
      removeDom();
    })();
  
    function removeDom()
    {
        if (window.innerWidth&gt;=668)
              {
                  $scope.rm668 = true;
              }
              else
              {
                  $scope.rm668 = false;
              }
        if (window.innerWidth&gt;768)
          {
              $scope.rm768 = true;
          }
          else
          {
              $scope.rm768 = false;
          }
    }
  
    $(window).on("resize.doResize", function (){
  
          $scope.$apply(function(){
              removeDom();
          });
      });
  
      $scope.$on("$destroy",function (){
          //remove the handler added earlier
           $(window).off("resize.doResize"); 
      });
  
  }])
  </code></pre>