title: Appending elements in Header using Javascript DOM and having it as a common header shared by all webpages in Angular JS
body: <p>I created a json File with an array of "learnobjects". Every object has an id, a name, and a link.</p>
  
  <p>Here is <a href="http://plnkr.co/edit/JzFBQz5gYjUJQgiPoQ5I?p=preview" rel="nofollow noreferrer">my plnkr example</a></p>
  
  <pre><code>var myMessage = {
  "learnobjects": [{
      "id": "1",
      "name": "Animation-Basics",
      "link": "animation_basics.html",
  
  },    
  {
      "id": "2",
      "name": "Interpolation",
      "link": "interpolation.html",
  
  }
  ]}
  
  var jsonData = JSON.parse(myMessage);
  for (var i = 0; i &lt; jsonData.learnobjects.length; i++) {
  var id = jsonData.myMessage[i].id;
  var name = jsonData.myMessage[i].name;
  var link = jsonData.myMessage[i].link;
  
  
  var mainPath = document.createElement('a');
      mainPath.className = 'w3-bar-item w3-mobile w3-border-right';
      mainPath.id = id;
      mainPath.href = link;
      mainPath.innerHTML =
      name + '&lt;/a&gt;';
      document.getElementById('myHeader').appendChild(mainPath);
  }
  var myApp = angular.module('myApp', []);
  
  function HeaderCtrl($scope) {
  $scope.header = {name: "header.html", url: "header.html"};
  }
  </code></pre>
  
  <p>Index.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="myApp"&gt;
  
  &lt;head&gt;
  &lt;link rel="stylesheet" href="style.css"&gt;
  &lt;script 
  src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt; 
  &lt;/script&gt;
  &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div ng-controller="HeaderCtrl"&gt;
      &lt;div ng-include src="header.url"&gt;&lt;/div&gt;
      &lt;script type="text/ng-template" id="header.html"&gt;&lt;/script&gt;
    &lt;/div&gt;
    &lt;p&gt; Index &lt;/p&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Without the angular JS <strong>($scope)</strong> it worked but every time im clicking on a link in the header, the elements are loading again everytime. I am trying to do it with AngularJS, but unfortunately it is not working yet.
  My problem is that I want this header to be there the whole time, and not to load every time I click on a link in it.</p>
  
  <p>I would be thankful for every help or suggestion!</p>
  
  <p>Cheers!</p>