title: Angular example from the web not working
body: <p>I'm beginning with Angular and I saw this example in this page <a href="http://tutorialzine.com/2013/08/learn-angularjs-5-examples/" rel="nofollow">http://tutorialzine.com/2013/08/learn-angularjs-5-examples/</a> and I'm trying to reproduce some of them.</p>
  
  <p>The example 4 looks like something I can use right away in the system I'm working on right now.</p>
  
  <p>I couldn't get it to work integrated on my system, so I isolated the example in a single file and I'm getting the exact same result as in my system.</p>
  
  <p>The console gives the the following error:</p>
  
  <pre><code>angular.js:13236Error: [ng:areq] http://errors.angularjs.org/1.5.0/ng/areq?p0=InstantSearchController&amp;p1=not%20a%20function%2C%20got%20undefined
  at Error (native)
  at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:6:416
  at sb (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:23:63)
  at Sa (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:23:150)
  at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:86:318
  at A (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:64:17)
  at u (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:65:8)
  at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:58:136)
  at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:57:279
  at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:21:88
  </code></pre>
  
  <p>I'm trying to figure out why it says InstantSearchController is not a function, it should be working since it's a copy and paste from a working example from the web.</p>
  
  <p>I was thinking things should be declared in a certain order but even moving things around in the page didn't give me any result.</p>
  
  <p>Maybe the working example and the code being shown are different.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"&gt;&lt;/script&gt;
  &lt;style type="text/css"&gt;
      *{
   margin:0;
   padding:0;
  }
  
  body{
   font:15px/1.3 'Open Sans', sans-serif;
   color: #5e5b64;
   text-align:center;
  }
  
  a, a:visited {
   outline:none;
   color:#389dc1;
  }
  
  a:hover{
   text-decoration:none;
  }
  
  section, footer, header, aside, nav{
   display: block;
  }
  
  /*-------------------------
   The search input
  --------------------------*/
  
  .bar{
   background-color:#5c9bb7;
  
   background-image:-webkit-linear-gradient(top, #5c9bb7, #5392ad);
   background-image:-moz-linear-gradient(top, #5c9bb7, #5392ad);
   background-image:linear-gradient(top, #5c9bb7, #5392ad);
  
   box-shadow: 0 1px 1px #ccc;
   border-radius: 2px;
   width: 400px;
   padding: 14px;
   margin: 45px auto 20px;
   position:relative;
  }
  
  .bar input{
   background:#fff no-repeat 13px 13px;
   background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkU5NEY0RTlFMTA4NzExRTM5RTEzQkFBQzMyRjkyQzVBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkU5NEY0RTlGMTA4NzExRTM5RTEzQkFBQzMyRjkyQzVBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RTk0RjRFOUMxMDg3MTFFMzlFMTNCQUFDMzJGOTJDNUEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RTk0RjRFOUQxMDg3MTFFMzlFMTNCQUFDMzJGOTJDNUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4DjA/RAAABK0lEQVR42pTSQUdEURjG8dOY0TqmPkGmRcqYD9CmzZAWJRHVRIa0iFYtM6uofYaiEW2SRJtEi9YxIklp07ZkWswu0v/wnByve7vm5ee8M+85zz1jbt9Os+WiGkYdYxjCOx5wgFeXUHmtBSzpcCGa+5BJTCjEP+0nKWAT8xqe4ArPGEEVC1hHEbs2oBwdXkM7mj/JLZrad437sCGHOfUtcziutuYu2v8XUFF/4f6vMK/YgAH1HxkBYV60AR31gxkBYd6xAeF3VzMCwvzOBpypX8V4yuFRzX2d2gD/l5yjH4fYQEnzkj4fae5rJulF2sMXVrAsaTWttRFu4Osb+1jEDT71/ZveyhouTch2fINQL9hKefKjuYFfuznXWzXMTabyrvfyIV3M4vhXgAEAUMs7K0J9UJAAAAAASUVORK5CYII=);
  
   border: none;
   width: 100%;
   line-height: 19px;
   padding: 11px 0;
  
   border-radius: 2px;
   box-shadow: 0 2px 8px #c4c4c4 inset;
   text-align: left;
   font-size: 14px;
   font-family: inherit;
   color: #738289;
   font-weight: bold;
   outline: none;
   text-indent: 40px;
  }
  
  ul{
   list-style: none;
   width: 428px;
   margin: 0 auto;
   text-align: left;
  }
  
  ul li{
   border-bottom: 1px solid #ddd;
   padding: 10px;
   overflow: hidden;
  }
  
  ul li img{
   width:60px;
   height:60px;
   float:left;
   border:none;
  }
  
  ul li p{
   margin-left: 75px;
   font-weight: bold;
   padding-top: 12px;
   color:#6e7a7f;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;!-- Initialize a new AngularJS app and associate it with a module named "instantSearch"--&gt;
      &lt;div ng-app="instantSearch" ng-controller="InstantSearchController"&gt;
  
          &lt;div class="bar"&gt;
              &lt;!-- Create a binding between the searchString model and the text field --&gt;
              &lt;input type="text" ng-model="searchString" placeholder="Enter your search terms" /&gt;
          &lt;/div&gt;
  
          &lt;ul&gt;
              &lt;!-- Render a li element for every entry in the items array. Notice
                   the custom search filter "searchFor". It takes the value of the
                   searchString model as an argument.
               --&gt;
              &lt;li ng-repeat="i in items | searchFor:searchString"&gt;
                  &lt;a href="{{i.url}}"&gt;&lt;img ng-src="{{i.image}}" /&gt;&lt;/a&gt;
                  &lt;p&gt;{{i.title}}&lt;/p&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;script type="text/javascript"&gt;
      // Define a new module for our app. The array holds the names of dependencies if any.
      var app = angular.module("instantSearch", []);
  
      // Create the instant search filter
  
      app.filter('searchFor', function () {
  
          // All filters must return a function. The first parameter
          // is the data that is to be filtered, and the second is an
          // argument that may be passed with a colon (searchFor:searchString)
  
          return function (arr, searchString) {
  
              if (!searchString) { 
                  return arr;
              }
  
              var result = [];
  
              searchString = searchString.toLowerCase();
  
              // Using the forEach helper method to loop through the array
              angular.forEach(arr, function (item) {
  
                  if (item.title.toLowerCase().indexOf(searchString) !== -1) {
                      result.push(item);
                  }
  
              });
  
              return result;
          };
  
      });
  
      // The controller
  
      function InstantSearchController($scope) {
  
          // The data model. These items would normally be requested via AJAX,
          // but are hardcoded here for simplicity. See the next example for
          // tips on using AJAX.
  
          $scope.items = [
              {
                  url: 'http://tutorialzine.com/2013/07/50-must-have-plugins-for-extending-twitter-bootstrap/',
                  title: '50 Must-have plugins for extending Twitter Bootstrap',
                  image: 'http://cdn.tutorialzine.com/wp-content/uploads/2013/07/featured_4-100x100.jpg'
              },
              {
                  url: 'http://tutorialzine.com/2013/08/simple-registration-system-php-mysql/',
                  title: 'Making a Super Simple Registration System With PHP and MySQL',
                  image: 'http://cdn.tutorialzine.com/wp-content/uploads/2013/08/simple_registration_system-100x100.jpg'
              },
              {
                  url: 'http://tutorialzine.com/2013/08/slideout-footer-css/',
                  title: 'Create a slide-out footer with this neat z-index trick',
                  image: 'http://cdn.tutorialzine.com/wp-content/uploads/2013/08/slide-out-footer-100x100.jpg'
              },
              {
                  url: 'http://tutorialzine.com/2013/06/digital-clock/',
                  title: 'How to Make a Digital Clock with jQuery and CSS3',
                  image: 'http://cdn.tutorialzine.com/wp-content/uploads/2013/06/digital_clock-100x100.jpg'
              },
              {
                  url: 'http://tutorialzine.com/2013/05/diagonal-fade-gallery/',
                  title: 'Smooth Diagonal Fade Gallery with CSS3 Transitions',
                  image: 'http://cdn.tutorialzine.com/wp-content/uploads/2013/05/featured-100x100.jpg'
              },
              {
                  url: 'http://tutorialzine.com/2013/05/mini-ajax-file-upload-form/',
                  title: 'Mini AJAX File Upload Form',
                  image: 'http://cdn.tutorialzine.com/wp-content/uploads/2013/05/ajax-file-upload-form-100x100.jpg'
              },
              {
                  url: 'http://tutorialzine.com/2013/04/services-chooser-backbone-js/',
                  title: 'Your First Backbone.js App – Service Chooser',
                  image: 'http://cdn.tutorialzine.com/wp-content/uploads/2013/04/service_chooser_form-100x100.jpg'
              }
          ];
  
      }
  &lt;/script&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>