$scope not binding inside function in Angular JS

Question

I am using ionic framework and am trying to make a request to a service but I am not able to pass the params to the function.

My Html (ionic structure) is as follows:

<ion-view view-title="Service Factor" ng-controller="beamdeflectionCtrl">
     <ion-content>
         <div class="item">
             <form novalidate class="col-lg-2">
                 <div class="list">
                     <label class="item item-input item-stacked-label">
                         <span class="input-label">Shaft Length</span>
                         <input type="number" name="itsShaftLength" placeholder="1212" ng-model="itsShaftLength">
                     </label>
                     <label class="item item-input item-stacked-label">
                         <span class="input-label">Running Load</span>
                         <input type="number" placeholder="1212" ng-model="itsRunningLoad">
                     </label>
                     <label class="item item-input item-stacked-label">
                         <span class="input-label">Area Moment Of Inertia</span>
                         <input type="number" placeholder="1212"
                                   ng-model="itsAreaMomentOfInertia">
                     </label>
                     <label class="item item-input item-stacked-label">
                         <span class="input-label">Modulus Of Elasticity</span>
                         <input type="number" placeholder="1212"
                                   ng-model="itsModulusOfElasticity">
                     </label>
                 </div>
                 <div class="form-group">
                     <button class="btn btn-success btn-lg" ng-click="post()">Get Beam Defection</button>
                 </div>
             </form>
         </div>
     </ion-content>
 </ion-view>

And my JS file:

angular.module('beamdeflection', [])
    .controller('beamdeflectionCtrl', beamdeflectionCtrl,['$scope']);

function beamdeflectionCtrl($stateParams, $scope, $http, $ionicPopup) {
    $scope.post = function () {
        $http({
            url: "/myurl",
            method: "GET",
            params: {
                shaftLength: $scope.itsShaftLength,//I am not getting this value
                runningLoad:$scope.itsRunningLoad,//I am not getting this value
                areaMomentOfInertia: $scope.itsAreaMomentOfInertia,//I am not getting this value
                modulusOfElasticity:$scope.itsModulusOfElasticity//I am not getting this value
            }}).success(function (data, status, headers, config) {
                $ionicPopup.alert({
                    title: 'Beam Deflection Calculated',
                    template: data
                });
                $scope.data = data;
            }).error(function (data, status, headers, config) {
                $ionicPopup.alert({
                    title: 'Beam Deflection Failed',
                    template: data
                });
            });
        };
    };
}

For some reason $scope.itsShaftLength and other params inside the post function are not getting values. The debugger states that they are undefined. I am new to angular. I wonder if I missed something in my code. Moreover, I tried passing $scope to the function as $scope.post = function ($scope){.... but it yells at me saying "$scope not defined". Any help is appreciated.

Answer 1

As mentioned in my comment you should always use objects in ng-model since binding of primitives gets broken in child scopes.

General rule of thumb: always have a dot in ng-model

Try changing all the ng-model to have an object prefix and a dot

<input ng-model="formData.itsModulusOfElasticity">

In controller define that object:

$scope.formData={};

This also simplifies what you need to send as params since all the form data is already contained in one object:

 params: angular.copy($scope.formData) // using "copy" strips out any angular properties

Start here for further reading and make sure to read about angular scopes

Why don't the AngularJS docs use a dot in the model directive?

Answer 2

You really not define your ng-models in $scope on your code. You can do something like this:

 $scope.post = function (data) {
    $http({
        url: "/myurl",
        method: "GET",
        params: {
            shaftLength: data.itsShaftLength,
            runningLoad: data.itsRunningLoad,
            areaMomentOfInertia: data.itsAreaMomentOfInertia,
            modulusOfElasticity: data.itsModulusOfElasticity            }})... more code...

In your html you define at all inputs ng-model:

<input type="number" name="itsShaftLength" placeholder="1212" ng-model="data.itsShaftLength"> ... 

And on ng-click:

ng-click="post(data)"