title: AngularJS Why is my Controller not responsive?
body: <p>This is a difficult question to ask, I will do my best to be brief: </p>
  
  <p>I have a simple controller that I want to use to get information from an API and populate a selection list from trello. </p>
  
  <p>Here is my controller: </p>
  
  <pre><code>function TrelloController($scope, $location, $routeParams, $timeout, dialogs, common){
      var vm = this;
      var controllerId = 'TrelloController';
      var getLogFn = common.logger.getLogFn;
      var log = getLogFn(controllerId);
      var logError = getLogFn(controllerId, 'error');
      var scope = $scope;
      var TRELLO = require("trello");
      var key = '&lt;my key&gt;';
      var token = '&lt;my token&gt;';
      var trello = new TRELLO(key, token);
  
      vm.title = "Trello Controller";
      vm.addCard = addCard;
      vm.getBoards = getBoards;
      vm.toggle = toggle;
      vm.getLists = getLists;
      vm.getListsFromDictionary = getListsFromDictionary;
      vm.isTrelloActive = false;
  
      activate();
  
      function activate(){
          common.activateController([], controllerId)
              .then(function () {
                  log('Activated Trello Controller');
                  initialise();
              });
      }
      function initialise() {
          vm.isTrelloActive = false;
          getBoards();
          getLists();
      }
  
      function toggle() {
          vm.isTrelloActive = !vm.isTrelloActive;
          log("TOGGLE CLICKED");
      }
  
      function addCard(cardName, cardDescription, listId) {
          trello.addCard(cardName, cardDescription, listId, function (error, cardAdded) {
              if (error) {
                  log("Could Not Add Card: ", error);
              } else {
                  log("Card added: ", cardAdded.name);
              }
          });
      }
  
      function getBoards() {
          trello.getBoards("me", function (error, boards) {
              if (error) {
                  log("Could Not Get Boards: ", error);
              } else {
                  log("found " + boards.length + " boards");
                  console.log(boards);
              }
              scope.boards = boards;
          });
      }
  
      function getLists(){
          for (var i=0; i&lt;scope.boards.length; i++){
              getListsWithBoardId(scope.boards[i].id, i);
          }
      }
  
      function getListsWithBoardId(boardId, index){
          trello.getListsOnBoard(boardId, function(error, lists){
              if (error) {
                  log("Could Not Get Boards: ", error);
              } else {
                  log("found " + lists.length + " lists on board:"+boardId);
                  console.log(lists);
              }
              scope.boards[index].lists = lists;
          });
      }
  
      function getListsFromDictionary(boardId){
          for (var i=0; i&lt;scope.boards.length; i++) {
              if(scope.boards[i].id == boardId){
                  return scope.boards[i].lists;
              }
          }
      }
  }module.exports = TrelloController;
  
  </code></pre>
  
  <p>This controller is intended to serve the purpose of governing my dialogue, simplified, this is that dialogue:</p>
  
  <pre><code>&lt;div data-ng-controller="TrelloController as vm"&gt;
      &lt;div class="modal-header"&gt;
          &lt;img class="trelloLogo" name="trelloLogo" src="public/content/images/trello-mark-blue.png" alt="Add To Trello" ng-click="vm.toggle}"&gt;
          &lt;h3&gt;{{parameter.heading}}&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
          &lt;form name="form"&gt;
              &lt;div ng-if="vm.isTrelloActive" class="form-group"&gt;
                  &lt;label&gt;Board&lt;/label&gt;
                  &lt;select name="typeInput" class="form-control" ng-required="true" ng-model="form.boardInput"&gt;
                      &lt;option selected&gt;Choose Board&lt;/option&gt;
                      &lt;option ng-repeat="board in scope.boards" value="{{board.id}}"&gt;{{board.name}}&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  
      &lt;!-- This section contains parts in the vm.addCard(...) that aren't included in this shortened version of The HTML template, I provided it with the additional fields for context of the API call at the end --&gt; 
  
      &lt;div ng-if="vm.isTrelloActive" class="modal-footer"&gt;
          &lt;button class="btn btn-primary" ng-disabled="!form.$dirty || !form.$valid" ng-click="vm.addCard(form.titleInput, form.descriptionInput, form.listInput)"&gt;Add To Board&lt;/button&gt;
          &lt;button class="btn btn-default" ng-click="vm.isTrelloActive=false"&gt;Cancel&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When I am in the dialogue, Pressing the logo button appears to do nothing even though when it was previously set to: <code>ng-click="vm.isTrelloActive = !vm.isTrelloActive"</code> it would toggle the entire page. The activate method produces no logs and does not appear to run when pressed. </p>
  
  <p>Why is this happening? </p>