<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">
  <head>
    <meta charset="utf-8">
    <title>Scope and Interpolation</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- load bootstrap and fontawesome via CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <header>
  		<nav class="navbar navbar-default">
    		<div class="container">
    			<div class="navbar-header">
    				<a class="navbar-brand" href="/">AngularJS</a>
    			</div>

    			<ul class="nav navbar-nav navbar-right">
    				<li><a href="/"><i class="fa fa-home"></i> Home</a></li>
    			</ul>
    		</div>
  		</nav>
  	</header>

    <div class="container">
		  <div ng-controller="mainController">
        <h1>AngularJS</h1>
        <h3>Hello {{ name }}</h3>
      </div>
    <div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" ></script>
  </body>
</html>
