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 <p>{{new_prompt}}</p>) but when I click submit, console logs 'undefined'.

View:

<div class=panel ng-if=isAuthenticated()>

    <div class=panel-body>

        <h2 class=text-center>Add a prompt</h2>

        <form method=post ng-submit=submitPrompt() name=promptForm>

            <div class=form-group has-feedback>

                <input class=form-control input-lg type=text name=prompt ng-model=new_prompt placeholder=Imagine if... required autofocus>

                <span class=ion-edit form-control-feedback></span>

            </div>

            <p>{{new_prompt}}</p>

            <button type=submit ng-disabled=promptForm.$invalid class=btn btn-lg btn-block btn-success>Add prompt</button>

        </form>

    </div>

</div>

Controller:

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

            }, ];

        }

    ]);

edit:

Ved's solution got it working. Now I don't understand why it had to be done like that when this works:

<div class=panel>

    <form ng-submit=printText()>

        <input type=text ng-model=justTest>

        <button type=submit class=btn></button>

    </form>

</div>



$scope.printText = function() {

    console.log($scope.justTest)

};

Working example of edit: http://jsfiddle.net/fuczak/dLcLkycb/

EDIT 2:

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.