ng-include Angular JS

I have a main index.html file and in that file, I want to include another .html using ng-include. This is my code:

(I will only upload the relevant code sections, if the whole code is needed, I can edit it)

index.html

<!DOCTYPE html>
<html>

<head>
<!-- include CAPH 3.0.1 default package -->
<link href="lib/caph/3.0.1/caph.min.css" rel="stylesheet" type="text/stylesheet">
<link href="styles/main.css" rel="stylesheet" type="text/stylesheet">
<!-- include jQuery file (you can use AngularJS & jQuery in your environment) -->
<script src="lib/caph/3.0.1/bower_components/jquery/dist/jquery.min.js" type="text/javascript"></script>
<script src="lib/caph/3.0.1/bower_components/angular/angular.min.js" type="text/javascript"></script>
<!-- include the CAPH Package for AngularJS -->
<script src="lib/caph/3.0.1/caph-angular.min.js" type="text/javascript"></script>
</head>
<script>
var myApp = angular.module('myApp', ['caph.focus', 'caph.ui']);
myApp.factory('sharedProperties', function(){
  var DEPTH={
    MAIN_MENU: 1,
    RESTAURANT: 2,
    MOVIES: 3,
    MOVIE_SELECT: 4
  };
  var currentDepth;
  var focus = function($event) {
    $($event.currentTarget).css({
      border: '10px solid red'
   });
  }

  var blur = function($event){
    $($event.currentTarget).css({
      border : '3px solid transparent'
   });
  }

  var select = function($event){
    if($event.target.id === "roomservice"){
      currentDepth = DEPTH.RESTAURANT;
    } else if($event.target.id === "vod"){
      currentDepth = DEPTH.MOVIES;
    } else if($event.target.id === "back"){
      currentDepth = DEPTH.MAIN_MENU;
    } else if($event.target.id === "fantasy"){
      currentDepth = DEPTH.MOVIE_SELECT;
    }
    return currentDepth;
  }

  return{
    focus: focus,
    blur: blur,
    select: select,
    currentDepth: currentDepth,
    depth: DEPTH
  }
});

    myApp.controller('myController', function($scope, sharedProperties) {
    $scope.currentDepth = sharedProperties.depth.MAIN_MENU;
    $scope.focus = function($event){
      sharedProperties.focus($event);
    }
    $scope.blur = function($event){
      sharedProperties.blur($event);
    }
    $scope.select = function($event){
      $scope.currentDepth = sharedProperties.select($event);
      console.log($scope.currentDepth);
    }
    $scope.items = [];
    for (var i = 0; i < 20; i++) {
      $scope.items.push({
        text: i+1,
        image: 'image/moviepics/' + (i%2 + 1) + '.jpg'
      });
    }
</script>

<body ng-app="myApp">
<div ng-controller="myController">
    <div ng-if="currentDepth === 4">
      <h1>Pick a movie</h1>
      <div ng-include="'new.html'">
      </div>
    </div>
  </div>
</div>
</body>

</html>

And this is new.html:

<style>
  .list{
    position: absolute;
    width: 600px;
    height: 135px;
    overflow: hidden;
    margin-bottom: 10px;
    border: 1px solid transparent;
 }

  .item{
    background: green;
    box-sizing: border-box;
    border: 3px solid white;
    width: 200px;
    height: 135px;
 }
</style>
<caph-list container-class="list" on-focus-item-view="onFocusItemView($context)"  items="item in items">
   <div class="item" focusable data-focusable-initial-focus="{{$index===0?true:false}}">
     <div class="test" style="width:100%; height:100%; background-size:100% 100%; background: url({{item.image || ''}})"><a href="#"></a></div>
  </div>
</caph-list>

I am getting an ng-areq error with a WARNING of angular loaded more than once. For the full error, please see the attached picture. I hope my question and code is clear Any and all help is appreciated. Thank you.

Solution

When you include a template, HTML of relevant section of the page needs to be present in it. In your new.html, you've included everything from the HTML tag which is unnecessary. Remove those and have only the necessary div and other elements.