title: "Error: $injector:nomod Module Unavailable"
body: <p>Hello does anyone know why my it doesn't display 3 instead of {{remain}} ? I got the error :
  "Error: $injector:nomod Module Unavailable".
  My snippet work here but I don't know why it does not work to my side</p>
  
  <pre><code>/index.html
  /app.js
  /MyTodoList.js
  /style.css
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//Inside app.js
  var app = angular.module("myapp", []);
  
  //Inside MyTodoList.js
  app.controller('TodoCtrl', ['$scope', function ($scope) {
   $scope.remain = 3;
  }]);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,
  body {
   margin: 0;
   padding: 0;
  }
  
  button {
   margin: 0;
   padding: 0;
   border: 0;
   background: none;
   font-size: 100%;
   vertical-align: baseline;
   font-family: inherit;
   color: inherit;
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
   -o-appearance: none;
   appearance: none;
  }
  
  body {
   font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
   line-height: 1.4em;
   color: #4d4d4d;
   width: 550px;
   margin: 0 auto;
   -webkit-font-smoothing: antialiased;
   -moz-font-smoothing: antialiased;
   -ms-font-smoothing: antialiased;
   -o-font-smoothing: antialiased;
   font-smoothing: antialiased;
  }
  
  .sapUiTv, .sapUiBtnS {
   font: inherit;
   font-size: inherit;
  }
  
  #todoapp {
   background: #fff;
   background: rgba(255, 255, 255, 0.9);
   margin: 130px 0 40px 0;
   border: 1px solid #ccc;
   position: relative;
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2),
      0 25px 50px 0 rgba(0, 0, 0, 0.15);
  }
  
  #todoapp:before {
   content: '';
   border-left: 1px solid #f5d6d6;
   border-right: 1px solid #f5d6d6;
   width: 2px;
   position: absolute;
   top: 0;
   left: 40px;
   height: 100%;
  }
  
  #todoapp input::-webkit-input-placeholder {
   font-style: italic;
  }
  
  #todoapp input:-moz-placeholder {
   font-style: italic;
   color: #a9a9a9;
  }
  
  #todoapp h1 {
   position: absolute;
   top: -120px;
   width: 100%;
   font-size: 70px;
   font-weight: bold;
   text-align: center;
   color: #b3b3b3;
   color: rgba(255, 255, 255, 0.3);
   text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
   -webkit-text-rendering: optimizeLegibility;
   -moz-text-rendering: optimizeLegibility;
   -ms-text-rendering: optimizeLegibility;
   -o-text-rendering: optimizeLegibility;
   text-rendering: optimizeLegibility;
  }
  
  #header {
   padding-top: 15px;
   border-radius: inherit;
  }
  
  #header:before {
   content: '';
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   height: 15px;
   z-index: 2;
   border-bottom: 1px solid #6c615c;
   background: #8d7d77;
   background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
   background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
   background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
   background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
   background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
   background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
   border-top-left-radius: 1px;
   border-top-right-radius: 1px;
  }
  
  #main {
   position: relative;
   z-index: 2;
   border-top: 1px dotted #adadad;
  }
  
  #new-todo,
  .sapUiTfBrd.sapUiTfRo.todo,
  .sapUiTfBrd.sapUiTfStd.todo {
   position: relative;
   margin: 0;
   margin-right: 153px;
   width: 100%;
   font-size: 24px;
   font-family: inherit;
   line-height: 1.4em;
   background-color: transparent;
   border: 0;
   outline: none;
   color: #4D4D4D;
   padding: 6px;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   -o-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-font-smoothing: antialiased;
   -moz-font-smoothing: antialiased;
   -ms-font-smoothing: antialiased;
   -o-font-smoothing: antialiased;
   font-smoothing: antialiased;
  }
  
  .sapUiTfBrd.sapUiTfStd.todo {
   border: 1px solid #999;
   box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
  }
  
  .sapUiTfBrd.sapUiTfRo.todo[data-completed="true"] {
   color: #a9a9a9;
   text-decoration: line-through;
  }
  
  #toggle-all {
   display: block;
   outline: none;
  }
  
  #toggle-all input {
   z-index: 3;
   position: absolute;
   text-align: center;
   top: 9px;
   left: -15px;
   width: 65px;
   height: 41px;
   -webkit-transform: rotate(90deg);
   /* transform: rotate(90deg); */
   -webkit-appearance: none;
   appearance: none;
  }
  
  #toggle-all input:before {
   content: '»';
   font-size: 28px;
   color: #d9d9d9;
   padding: 0 25px 7px;
  }
  
  #toggle-all input:checked:before {
   color: #737373;
  }
  
  #new-todo {
   padding: 15px 15px 16px 60px;
   border: none;
   background: rgba(0, 0, 0, 0.02);
   z-index: 2;
   box-shadow: none;
  }
  
  #todo-list {
   margin: 0;
   padding: 0;
   list-style: none;
  }
  
  .checkbox-align {
    padding-top: 7px;
    margin-bottom: 0;
    vertical-align: middle;
  }
  
  #todo-list li {
   position: relative;
   font-size: 24px;
   border-top: 1px dotted #ccc;
  }
  
  #todo-list input[type='checkbox'] {
   text-align: center;
   width: 40px;
   /* auto, since non-WebKit browsers doesn't support input styling */
   height: auto;
   /*
   position: absolute;
   top: 0;
   bottom: 0;
   */
   margin: auto 0;
   -webkit-appearance: none;
   /*-moz-appearance: none;*/
   -ms-appearance: none;
   -o-appearance: none;
   appearance: none;
  }
  
  #todo-list input[type='checkbox']:after {
   content: '✔';
   line-height: 62px;
   font-size: 20px;
   color: #d9d9d9;
   text-shadow: 0 -1px 0 #bfbfbf;
  }
  
  #todo-list input[type='checkbox']:checked:after {
   color: #85ada7;
   text-shadow: 0 1px 0 #669991;
   bottom: 1px;
   position: relative;
  }
  
  #todo-list input:not([type='checkbox']) {
   word-break: break-word;
   padding: 15px;
   margin-left: 45px;
   display: block;
   line-height: 1.2em;
   -webkit-transition: color 0.4s;
   -moz-transition: color 0.4s;
   -ms-transition: color 0.4s;
   -o-transition: color 0.4s;
   transition: color 0.4s;
  }
  
  #todo-list li .destroy {
   outline: none;
   background-color: transparent;
   display: none;
   position: absolute;
   top: 0;
   right: 10px;
   bottom: 0;
   width: 40px;
   height: 40px;
   margin: auto 0;
   font-size: 22px;
   color: #a88a8a;
   -webkit-transition: all 0.2s;
   -moz-transition: all 0.2s;
   -ms-transition: all 0.2s;
   -o-transition: all 0.2s;
   transition: all 0.2s;
  }
  
  #todo-list li .destroy:hover {
   text-shadow: 0 0 1px #000,
       0 0 10px rgba(199, 107, 107, 0.8);
   -webkit-transform: scale(1.3);
   -moz-transform: scale(1.3);
   -ms-transform: scale(1.3);
   -o-transform: scale(1.3);
   transform: scale(1.3);
  }
  
  #todo-list li .destroy:after {
   content: '✖';
  }
  
  #todo-list li:hover .destroy {
   display: block;
  }
  
  #todo-list .sapUiRrNoData,
  #todo-list .sapUiRrPtb,
  #todo-list .sapUiRrFtr {
   display: none;
  }
  
  #footer {
   color: #777;
   padding: 0 15px;
   position: absolute;
   right: 0;
   bottom: -31px;
   left: 0;
   height: 20px;
   z-index: -1;
   text-align: center;
  }
  
  #footer:before {
   content: '';
   position: absolute;
   right: 0;
   bottom: 31px;
   left: 0;
   height: 50px;
   z-index: -1;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
      0 6px 0 -3px rgba(255, 255, 255, 0.8),
      0 7px 1px -3px rgba(0, 0, 0, 0.3),
      0 43px 0 -6px rgba(255, 255, 255, 0.8),
      0 44px 2px -6px rgba(0, 0, 0, 0.2);
  }
  
  #footer #AllTodos, #footer #ActiveTodos, #footer #CompletedTodos {
   color: #83756f;
  }
  
  #footer #clear-completed {
   color: inherit;
  }
  
  #footer .sapUiHLayoutChildWrapper:nth-of-type(1) {
   float: left;
   text-align: left;
  }
  
  #todo-count {
   vertical-align: 1px;
  }
  
  #todo-count:first-letter {
   font-weight: bold;
  }
  
  #filters {
   margin: 0;
   padding: 0 2px 0 0;
   position: absolute;
   right: 0;
   left: 0;
   outline: none;
  }
  
  #filters .sapUiBtnStd,
  #filters .sapUiBtnFoc {
   background-color: transparent;
   font-weight: normal;
   outline: none;
   padding-right: 3px;
   margin-top: -1px;
  }
  
  #filters .sapUiSegButtonSelected.sapUiBtnStd,
  #filters .sapUiSegButtonSelected.sapUiBtnAct.sapUiBtnFoc {
   font-weight: bold;
  }
  
  #footer .sapUiHLayoutChildWrapper:nth-of-type(3) {
   float: right;
  }
  
  #clear-completed {
   float: right;
   position: relative;
   line-height: 20px;
   text-decoration: none;
   background: rgba(0, 0, 0, 0.1);
   font-size: 11px;
   padding: 0 10px;
   border-radius: 3px;
   box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.2);
   height: 20px;
   outline: none;
  }
  
  @-moz-document url-prefix() {
   #clear-completed {
    top: -22px;
   }
  }
  
  #clear-completed:hover {
   background: rgba(0, 0, 0, 0.15);
   box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.3);
  }
  
  #info {
   margin: 65px auto 0;
   color: #a6a6a6;
   font-size: 12px;
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
   text-align: center;
  }
  
  #info a {
   color: inherit;
  }
  
  .hidden{
   display:none;
  }
  
  hr {
   margin: 20px 0;
   border: 0;
   border-top: 1px dashed #C5C5C5;
   border-bottom: 1px dashed #F7F7F7;
  }
  
  .learn a {
   font-weight: normal;
   text-decoration: none;
   color: #b83f45;
  }
  
  .learn a:hover {
   text-decoration: underline;
   color: #787e7e;
  }
  
  .learn h3,
  .learn h4,
  .learn h5 {
   margin: 10px 0;
   font-weight: 500;
   line-height: 1.2;
   color: #000;
  }
  
  .learn h3 {
   font-size: 24px;
  }
  
  .learn h4 {
   font-size: 18px;
  }
  
  .learn h5 {
   margin-bottom: 0;
   font-size: 14px;
  }
  
  .learn ul {
   padding: 0;
   margin: 0 0 30px 25px;
  }
  
  .learn li {
   line-height: 20px;
  }
  
  .learn p {
   font-size: 15px;
   font-weight: 300;
   line-height: 1.3;
   margin-top: 0;
   margin-bottom: 0;
  }
  
  .quote {
   border: none;
   margin: 20px 0 60px 0;
  }
  
  .quote p {
   font-style: italic;
  }
  
  .quote p:before {
   content: '“';
   font-size: 50px;
   opacity: .15;
   position: absolute;
   top: -20px;
   left: 3px;
  }
  
  .quote p:after {
   content: '”';
   font-size: 50px;
   opacity: .15;
   position: absolute;
   bottom: -42px;
   right: 3px;
  }
  
  .quote footer {
   position: absolute;
   bottom: -40px;
   right: 0;
  }
  
  .quote footer img {
   border-radius: 3px;
  }
  
  .quote footer a {
   margin-left: 5px;
   vertical-align: middle;
  }
  
  .speech-bubble {
   position: relative;
   padding: 10px;
   background: rgba(0, 0, 0, .04);
   border-radius: 5px;
  }
  
  .speech-bubble:after {
   content: '';
   position: absolute;
   top: 100%;
   right: 30px;
   border: 13px solid transparent;
   border-top-color: rgba(0, 0, 0, .04);
  }
  
  /**body*/.learn-bar &gt; .learn {
   position: absolute;
   width: 272px;
   top: 8px;
   left: -300px;
   padding: 10px;
   border-radius: 5px;
   background-color: rgba(255, 255, 255, .6);
   transition-property: left;
   transition-duration: 500ms;
  }
  
  @media (min-width: 899px) {
   /**body*/.learn-bar {
    width: auto;
    margin: 0 0 0 300px;
   }
   /**body*/.learn-bar &gt; .learn {
    left: 8px;
   }
   /**body*/.learn-bar #todoapp {
    width: 550px;
    margin: 130px auto 40px auto;
   }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
   &lt;meta charset="UTF-8"/&gt;
   &lt;title&gt;MyTodoList&lt;/title&gt;
   &lt;link rel="stylesheet" href="style.css"&gt;
  
   &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/
   libs/angularjs/1.3.5/angular.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body ng-app="myapp"&gt;
   &lt;section id = "todoapp" ng-controller="TodoCtrl"&gt;
    &lt;header id="header"&gt;
     &lt;h1&gt;MyTodoList&lt;/h1&gt;
     &lt;form action="#" id="todo-form"&gt;
      &lt;input type="text" id="new-todo" placeholder="New task" autofocus autocomplete="off" ng-model="remain"&gt;
     &lt;/form&gt;
    &lt;/header&gt;
  
   
    &lt;section id = "main"&gt;
     &lt;u1 id = "todo-list"&gt;
      &lt;li&gt;
       &lt;div class="view"&gt;
        &lt;input type="checkbox" class="toggle"&gt;
        &lt;label&gt;Etendre le linge&lt;/label&gt;
        &lt;button class="destroy"&gt;&lt;/button&gt;
       &lt;/div&gt;
      &lt;/li&gt;
     &lt;/u1&gt;
  
    &lt;/section&gt;
    &lt;footer id="footer"&gt;
     &lt;span id="todo-count"&gt;&lt;strong&gt; {{ remain }} &lt;/strong&gt; Tasks remaining
     &lt;/span&gt;
    &lt;/footer&gt;
  
  
   &lt;/section&gt;
  
   &lt;script src="MyTodoList.js"&gt;&lt;/script&gt;
   &lt;script src="app.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>