AngularJS - Directives and Scope

HTML

<script src="http://code.angularjs.org/1.1.4/angular.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/tippy.css">
<script src="https://unpkg.com/[email protected]/dist/tippy.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script>
<body ng-app="myapp">
  <div class="row">
    <div class="col s12 m6" ng-controller="controller1">
      <div class="card fill1">
        <div class="card-content">
          <span class="card-title">{{title}}</span>
          <div id="settings-controller2" parent="tippy" settings></div>
          <button ng-click="add()">
            click to add
          </button>
          <br/>
          <br/>

          <div class="filler">
            <div ng-show="loader" class="preloader-wrapper big active center-align">
              <div class="spinner-layer spinner-blue-only">
                <div class="circle-clipper left">
                  <div class="circle"></div>
                </div>
                <div class="gap-patch">
                  <div class="circle"></div>
                </div>
                <div class="circle-clipper right">
                  <div class="circle"></div>
                </div>
              </div>
            </div>
            <table ng-show="display" border="1">
              <tr ng-repeat="x in records">
                <td>{{x.Name}}</td>
                <td>{{x.Country}}</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

CSS

body {
  background-color: #f3f3f3;
}

JavaScript

var myapp = angular.module('myapp', [])
  .controller('controller1', function($scope, $timeout) {
    $scope.title = "Controller 1";
    $scope.cache = false;
    $scope.records = [];
    $scope.display = false;
    $scope.loader = false;

    $scope.add = function() {
      console.log("adding");
      $scope.display = false;
      $scope.loader = true;
      $timeout(function() {
        $scope.records = [{
          "Name": "Alfreds Futterkiste",
          "Country": "Germany"
        }, {
          "Name": "Berglunds snabbköp",
          "Country": "Sweden"
        }, {
          "Name": "Centro comercial Moctezuma",
          "Country": "Mexico"
        }, {
          "Name": "Ernst Handel",
          "Country": "Austria"
        }, {
          "Name": "Lfds Atrfc",
          "Country": "Austria"
        }]
        $scope.display = true;
        $scope.loader = false;
      }, 1500);

    }
  });