title: How to add to a <ul> using Angularjs - upon click of button/user input entry?
body: <p>Pls refer to my jsfiddle
  <a href="https://jsfiddle.net/sash2507/9g5c3f49/1/" rel="nofollow">https://jsfiddle.net/sash2507/9g5c3f49/1/</a></p>
  
  <p>I need a way to take the user input (filename) from the input box - and add it as a list item to the <code>&lt;ul&gt;</code>. I thought a .push directive would work and an ng-bind on the <code>&lt;ul&gt;</code> of that empty array variable? It isn't working. Any help is greatly appreciated, thanks.</p>
  
  <p>///////////HTML/////////////</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;link rel="stylesheet" href="CSS/style.css"&gt;
          &lt;script    `enter code here`src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"&gt;&lt;/script&gt;
          &lt;script src="JS/main.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body ng-app="MyModule"&gt;
          &lt;div ng-controller="MyController as ctrl"&gt;
          &lt;h2&gt;Folders&lt;/h2&gt;
          &lt;input type="checkbox" ng-model="ctrl.isBoxChecked"&gt;Expand All
              &lt;div ng-show="ctrl.isBoxChecked"&gt;
                  &lt;h2&gt;Folder 1&lt;/h2&gt;
                  &lt;ul&gt;
                      &lt;li&gt;File 1.1&lt;/li&gt;
                      &lt;li&gt;File 1.2&lt;/li&gt;
                      &lt;li&gt;File 1.3&lt;/li&gt;
                  &lt;/ul&gt;
  
                  &lt;h2&gt;Folder 2&lt;/h2&gt;
                  &lt;ul&gt;
                      &lt;li&gt;File 2.1&lt;/li&gt;
                      &lt;li&gt;File 2.2&lt;/li&gt;
                      &lt;li&gt;File 2.3&lt;/li&gt;
                  &lt;/ul&gt;
  
                  &lt;h2&gt;Folder 3&lt;/h2&gt;
                  &lt;ul&gt;
                      &lt;li&gt;File 3.1&lt;/li&gt;
                      &lt;li&gt;File 3.2&lt;/li&gt;
                      &lt;li&gt;File 3.3&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
  
              &lt;div&gt;
                  &lt;span id="fileInputBox"&gt;File Name: 
                      &lt;input type="text" ng-model="someFileName" `enter code here`placeholder="enter a file name" &gt;
                      &lt;button ng-click="ctrl.onUserClick"&gt;Add to list&lt;/button&gt;
                  &lt;/span&gt;
              &lt;/div&gt;
  
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>//////////////JS////////////</p>
  
  <pre><code>    var myMod = angular.module("MyModule", []);
      myMod.controller("MyController", function() {
          var self = this;
  
          // Makes checkbox unchecked upon page load
          self.isBoxChecked = false;
  
          // onUserClick fn makes value true for ng-show
          self.onUserClick = function() {
              self.isBoxChecked = !self.isBoxChecked;
              self.someFileName = self.fileNamesInList;
              self.fileNamesInList.push({
                  self.someFileName
              })
          };
  
          // Empty array for file names
          self.fileNamesInList = [];
  
      });
  </code></pre>
  
  <p>///////CSS//////////////</p>
  
  <pre class="lang-css prettyprint-override"><code>    #fileInputBox {
          margin-left: 300px;
          position: fixed;
      }
  </code></pre>