<!DOCTYPE html>
<html ng-app>

  <head>
    <meta charset="utf-8" />
    <title>AngularJS test</title>
    <link data-require="jasmine" data-semver="1.3.1" rel="stylesheet" href="//cdn.jsdelivr.net/jasmine/1.3.1/jasmine.css" />
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
    <script data-require="json2" data-semver="0.0.2012100-8" src="//cdnjs.cloudflare.com/ajax/libs/json2/20121008/json2.js"></script>
    <script data-require="jasmine" data-semver="1.3.1" src="//cdn.jsdelivr.net/jasmine/1.3.1/jasmine.js"></script>
    <script data-require="jasmine" data-semver="1.3.1" src="//cdn.jsdelivr.net/jasmine/1.3.1/jasmine-html.js"></script>
    <script data-require="angular.js" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
    <script data-require="angular-mocks" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular-mocks.js"></script>
    <script data-require="jquery@*" data-semver="2.0.1" src="http://code.jquery.com/jquery-2.0.1.min.js"></script>
    <script data-require="bootstrap@2.3.2" data-semver="2.3.2" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <script data-require="angular-ui@0.4.0" data-semver="0.4.0" src="https://raw.github.com/angular-ui/angular-ui/master/build/angular-ui.js"></script>
    <link rel="stylesheet" href="style.css" />
    
    <script src="md5.js"></script>
    <script src="app.js"></script>
    <script src="appSpec.js"></script>
    <script src="jasmineBootstrap.js"></script>
    <!-- bootstraps Jasmine -->
  </head>

  <body ng-controller="MainCtrl">
    <div id="container">
      <div class="navbar navbar-invers navbar-fixed-top">
        <div class="navbar-inner">
          <div class="container">
            <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </a>
            <!-- Be sure to leave the brand out there if you want it shown -->
            <a class="brand" href="#">
              <i class="icon-book icon-1x"></i> Address Book</a>
            <!-- Everything you want hidden at 940px or less, place within here -->
            <div class="nav-collapse collapse">
              <!-- .nav, .navbar-search, .navbar-form, etc -->
              <ul class="nav">
                <li><a href="#">View Contacts</a></li>
                <li><a href="#">Add Contact</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      
      <div class="row-fluid">
        <div class="span12">
          <p ng-show="App.loading">
           <i class="icon-spinner icon-spin icon-large"></i> Please wait while loading content..
         </p>
          <form class="form-search">
            <input type="text" ng-model="$.query" class="span12 search-query" placeholder="Filter by name"/>
          </form>
         <!-- <i class="icon-spinner icon-spin icon-large"></i> Spinner icon when loading content...-->
          <div class="contact well well-small clearfix" ng-repeat="item in contacts | filter:query">
            <a class="pull-left thumb" href="#">
              <img class="media-object" ng-src="{{item.avatar}}">
            </a>
            <div class="media-body">
            <span class="pull-right hidden">
                <a href="#"><i class="icon-twitter icon-1x"></i></a>
                <a href="#"><i class="icon-instagram icon-1x"></i> </a>
                <a href="#"><i class="icon-facebook icon-1x"></i> </a>
                <a href="#"><i class="icon-github icon-1x"></i></a>
              </span>
              <h4 class="media-heading">{{item.name}} <small>UI Developer</small></h4>
              <p class="meta">
                <a href="#" class="btn btn-mini"><i class="icon-phone"></i></a>
                <a href="mailto:{{item.email}}" class="btn btn-mini"><i class="icon-envelope"></i></a>
                <a href="#" class="btn btn-mini"><i class="icon-link"></i></a>
                <a href="#" class="btn btn-mini"><i class="icon-github"></i></a>
              </p>
            </div>
          </div>
          
        </div>
      </div>
      
      
    </div>
    
  </body>

</html>
