title: Disabling controls when showing loading bar in AngularJS
body: <p>I'm developping a webapp using AngularJS. I would like to show a load bar when the load of the data from the server takes very long. </p>
  
  <p>To simulate a huge load of data I use $timeout, and I show the loadbar when the operation starts and I hide it when the operation ends. </p>
  
  <p>The problem I'm facing is that, of course I'm only displaying a animated image when the operation starts, so all the controls (button,links, etc) are still available to click during the load of the data. I would like to find a way to disable all the controls during the load process to avoid the user to click on them.</p>
  
  <p>Could you please help me here? Thank you very much in advance!</p>
  
  <p>Some of my code if it helps:</p>
  
  <p>My controls in html:</p>
  
  <pre><code>&lt;div class="header"&gt;
              &lt;ul id="headerLinks" class="nav nav-pills pull-right"&gt;
                  &lt;li ng-class="menuItems.home.selected &amp;&amp; 'active'"&gt;&lt;a   ng-click="changeRootPath('home')"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li ng-class="menuItems.products.selected &amp;&amp; 'active'"&gt;&lt;a   ng-click="changeRootPath('products')"&gt;Products&lt;/a&gt;&lt;/li&gt;
                  &lt;li ng-class="menuItems.register.selected &amp;&amp; 'active'"&gt;&lt;a  ng-click="changeRootPath('register')"&gt;Sign in&lt;/a&gt;&lt;/li&gt;
                  &lt;li ng-class="menuItems.login.selected &amp;&amp; 'active'"&gt;&lt;a  ng-controller="LoginController"  ng-click="changeRootPath('login');open('md')" &gt;Login&lt;/a&gt;&lt;/li&gt;
                  &lt;li ng-class="menuItems.contact.selected &amp;&amp; 'active'"&gt;&lt;a  ng-click="changeRootPath('contact')"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  
  
              &lt;/ul&gt;
              &lt;h3 class="text-muted"&gt;Arena Club&lt;/h3&gt;
  
  &lt;/div&gt;    
  </code></pre>
  
  <p>The functions to show/hide the loading bar:</p>
  
  <pre><code>$scope.showLoader=function()
  {
      $scope.loader.loading=true;
  }
  
  $scope.hideLoader=function()
  {
      $scope.loader.loading=false;
  }
  </code></pre>
  
  <p>And the controller attached to the view:</p>
  
  <pre><code>app.controller('ProductsController', ['$scope','productsFactory','commonFactory','productsFactoryHelper','$timeout',function ($scope,productsFactory,commonFactory,productsFactoryHelper,$timeout) 
                                 {
  
  var _init=function()
  {
  //loadAllProducts();
  
  $scope.showLoader();
  $timeout(loadAllProducts, 6000);
  }
  
  
  var loadAllProducts=function()
  {
  
      productsFactory.query(function(response)
          {
          $scope.products=response;
          $scope.hideLoader();
          },function(error)
          {
              commonFactory.Pop('error','Ups! The products are not available at this moment. Please try again later. If the problem persists contact a system administrator');
          });
  
  }   
  
  _init();    
                                 }]);
  </code></pre>