title: How to include one html file in an html with angularjs
body: <p>My main html page is given below index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app&gt;
  &lt;head&gt;
  &lt;meta charset="ISO-8859-1"&gt;
  &lt;title&gt;Demo&lt;/title&gt;
  &lt;script type="text/javascript" src="js/lib/angular.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/controllers/app.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container" ng-controller="AppCtrl"&gt;
  
          &lt;h1&gt;AngulAir&lt;/h1&gt;
  
          &lt;div&gt;
              &lt;ul&gt;
                  &lt;li ng-repeat="airport in airports"&gt;
                  &lt;a href="" ng-click="setAirport(airport.code)"&gt;{{airport.code}}-{{airport.city}}&lt;/a&gt;
                  -&lt;a href="" ng-click="editAirport(airport.code)"&gt;Edit&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
              &lt;p ng-show="currentAirport"&gt;currentAirport:{{currentAirport.name}}&lt;/p&gt;
          &lt;/div&gt;
          &lt;p ng-show="editing.name"&gt;&lt;input type="text" ng-model="editing.name" value=""/&gt;&lt;/p&gt;
          &lt;div ng-include="sidebyURL"&gt;&lt;/div&gt;
          &lt;div ng-include="formURL"&gt;&lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and I am using javascript file as given below app.js which present inside js/controllers folder</p>
  
  <pre><code>function AppCtrl($scope) {
      $scope.airports = {
          "PDX" : {
              "code" : "PDX",
              "name" : "Portland International Airport",
              "city" : "Portland",
              "destinations" : [ "LAX", "SFO" ]
          },
          "STL" : {
              "code" : "STL",
              "name" : "Lampbert-St. Louis International Airport",
              "city" : "St. Louis",
              "destinations" : [ "LAX", "MKE" ]
          },
          "MCI" : {
              "code" : "MCI",
              "name" : "Kansas City International Airport",
              "city" : "Kansas City",
              "destinations" : [ "SFO", "LAX" ]
          },
      };
  
      $scope.currentAirport=null;
      $scope.sidebyURL='partials/airport.html';
      $scope.formURL='partials/form.html';
      $scope.setAirport = function(code) {
          $scope.currentAirport = $scope.airports[code];
      };
      $scope.editAirport = function(code) {
          $scope.editing = $scope.airports[code];
      };
  
  }
  </code></pre>
  
  <p>and I am including 2 html files in the main index.html file that 2 files airport.html is</p>
  
  <pre><code>&lt;div ng-show="currentAirport"&gt;
      &lt;h3&gt;{{currentAirport.name}}&lt;/h3&gt;
      &lt;h4&gt;Destinations&lt;/h4&gt;
      &lt;ul&gt;
          &lt;li ng-repeat="destination in currentAirport.destinations"&gt;
              {{destination}}
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and another form.html is </p>
  
  <pre><code>&lt;div ng-show="editing"&gt;
      &lt;h3&gt;Edit Airport&lt;/h3&gt;
      &lt;input type="text" ng-model="editing.name" value=""/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and my 2 remaining html files are present in the folder partials and while executing index.html I am not able to include form.html and airport.html inside index.html file if you have any idea about these let me know thank you.....</p>