title: AngularJS $scope.variable is undefined
body: <p>Pardon my newbiness but I can't figure it out. Why is my $scope.new_prompt undefined when clicking submit form? I can see the variable being updated as I type (in <code>&lt;p&gt;{{new_prompt}}&lt;/p&gt;</code>) but when I click submit, console logs 'undefined'.</p>
  
  <p>View:</p>
  
  <pre><code>&lt;div class="panel" ng-if="isAuthenticated()"&gt;
      &lt;div class="panel-body"&gt;
          &lt;h2 class="text-center"&gt;Add a prompt&lt;/h2&gt;
          &lt;form method="post" ng-submit="submitPrompt()" name="promptForm"&gt;
              &lt;div class="form-group has-feedback"&gt;
                  &lt;input class="form-control input-lg" type="text" name="prompt" ng-model="new_prompt" placeholder="Imagine if..." required autofocus&gt;
                  &lt;span class="ion-edit form-control-feedback"&gt;&lt;/span&gt;
              &lt;/div&gt;
              &lt;p&gt;{{new_prompt}}&lt;/p&gt;
              &lt;button type="submit" ng-disabled="promptForm.$invalid" class="btn btn-lg btn-block btn-success"&gt;Add prompt&lt;/button&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>angular.module('Prompts')
      .controller('HomeCtrl', ['$scope', '$auth', 'Prompt', '$alert', '$rootScope',
          function($scope, $auth, Prompt, $alert, $rootScope) {
              $scope.isAuthenticated = function() {
                  return $auth.isAuthenticated();
              };
              $scope.submitPrompt = function() {
                  console.log($scope.new_prompt);
                  Prompt.submitPrompt({
                      idea: $scope.new_prompt,
                      user: $rootScope.user
                  }).then(function() {
                      $alert({
                          content: 'Prompt has been added',
                          animation: 'fadeZoomFadeDown',
                          type: 'material',
                          duration: 3
                      });
                  });
              };
              $scope.stories = [{
                  prompt: 'Prompt 1',
                  author: 'blank',
                  upvotes: 0
              }, {
                  prompt: 'Prompt 2',
                  author: 'klanb',
                  upvotes: 1
              }, {
                  prompt: 'Prompt 3',
                  author: 'balbunk',
                  upvotes: 2
              }, ];
          }
      ]);
  </code></pre>
  
  <h1>edit:</h1>
  
  <p>Ved's solution got it working. Now I don't understand why it had to be done like that when this works: </p>
  
  <pre><code>&lt;div class="panel"&gt;
      &lt;form ng-submit="printText()"&gt;
          &lt;input type="text" ng-model="justTest"&gt;
          &lt;button type="submit" class="btn"&gt;&lt;/button&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  
  $scope.printText = function() {
      console.log($scope.justTest)
  };
  </code></pre>
  
  <p>Working example of edit: <a href="http://jsfiddle.net/fuczak/dLcLkycb/" rel="noreferrer">http://jsfiddle.net/fuczak/dLcLkycb/</a></p>
  
  <h1>EDIT 2:</h1>
  
  <p>The problem lies within ng-if directive. It creates own child scope, and that's where 'new_prompt' is located, not in the parent HomeCtrl scope.</p>