title: Calling a function onclick in AngularJs
body: <p>My code has following structure:</p>
  
  <ol>
  <li>main.html - loads all modules - declares ng-app and main controller - contains div tag-load-div</li>
  <li>file1.html ... (all other html files) - contain only <code>&lt;div&gt;</code> / child tags and are loaded into a load-div which is in main.html on events such as click</li>
  </ol>
  
  <p>now in one such file say file3.html, I have a checkbox. onclick of that checkbox I want to open a modal window - a form that will be submitted. Now here is my code</p>
  
  <p>file3.html</p>
  
  <pre><code>    &lt;div&gt;
          &lt;input type="checkbox" name="your-group" value="unit-in-group" onclick="toggleModal();"/&gt;Unit-in-group
          &lt;modal title="some title" visible="showModal"&gt;
              &lt;form role="form"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="email"&gt;Email address&lt;/label&gt;
                      &lt;input type="email" class="form-control" id="email" placeholder="Enter email" /&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="password"&gt;Password&lt;/label&gt;
                      &lt;input type="password" class="form-control" id="password" placeholder="Password" /&gt;
                  &lt;/div&gt;
                  &lt;button type="submit" class="btn btn-default"&gt;Submit&lt;/button&gt;
              &lt;/form&gt;
          &lt;/modal&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>now I have written follwing code in the main main controller declared in main.hml</p>
  
  <pre><code>$scope.showModal = false;
    $scope.toggleModal = function(){
      $scope.showModal = !$scope.showModal;
   };
  </code></pre>
  
  <p>The expected behaviour is when my file3 is loaded I will see a check box on the screen and as I click it, it will open a modal window but instead I see modal form fields on the same page where I see checkbox. and when I click it I get angular exception that  showModal is not defined.</p>
  
  <p>Where am I going wrong? </p>