AngularJS textbox value returns undefined - function

Question

When I press my button, I want to print the value of my textbox in my console. But my textbox returns a undefined. It seems that all of the code are working perfect, I did it the same way as some other code I used before, but it isn't working now.
This is my html code:
<form class="form-horizontal">
<input type="text" ng-model="add" ng-model-instant><button class="btn" ng-click="order()"><i class="icon-plus"></i>Order!</button>
</form>
This is my script:
angular.module('MyApp', []).
config(function($routeProvider) {
$routeProvider.
when('/boeken', {templateUrl:'partials/boeken.html', controller:BoekenCtrl}).
when('/orders', {templateUrl:'partials/orders.html', controller:OrderCtrl}).
when('/home', {templateUrl:'partials/home.html', controller:HomeCtrl}).
otherwise({redirectTo:'/home'});
});
//BoekenCtrl
//HomeCtrl
function OrderCtrl($rootScope) {
$rootScope.order = function() { console.log($rootScope.add); $rootScope.add = ""; };
}
Why is it that my textbox is undefined?

Answer 1

Instead
function OrderCtrl($rootScope) {
$rootScope.order = function() { console.log($rootScope.add); $rootScope.add = ""; };
}
use:
function OrderCtrl($scope) {
$scope.order = function() {
console.log($scope.add);
$scope.add = "";
};
}
Since your form exists under OrderCtrl, you need to use $scope into OrderCtrl controller to fetch any data. But, sure, you can store it after in $rootScope
Please, see the example in Fiddle