ng-view scope communicating with main scope communication

Question

It's maybe a stupid question but it's late and i'm desperate. I have a angularjs application that uses ngRoute. But everything is done in one controller. Now I have a form in a view and the use of that form is to put it's input field data into a var to send with post.

Don't mind al the console log i'm trying to find the error.

APP.JS

`

    $scope.addDevice = function(){
        $scope.device = {};

        var data = {

            'Name' : $scope.device.ChildName,
            'Serial' : $scope.device.Serial

        };

        console.log($scope.device.Serial);
        console.log($scope.device.ChildName);
        console.log(data);

        $http.post('http://141.135.5.117:3500/device/register', data, { headers: headers })
        .then(function(response){
            console.log(response);
            console.log(headers);




        });


    }`

Settings.html ( Note: this is a view in ng-view)

<form role="form" class='userForm'>
            <label for="addDevice">Add Device</label>
            <input type="text" class="form-control" id="deviceserial" placeholder="Enter serial number" ng-model="$scope.device.Serial">
            <input type="text" class="form-control" id="Devicechildname" placeholder="Enter baby name" ng-model="$scope.device.ChildName">
            <button type="submit" class="btn btn-success btn-block" ng-click="addDevice()">Add Device</button>
            <p>{{$scope.device.Serial}}</p>

</form>

This is the console output

Console output

All the functions are done in one controller.

Answer 1

First Remove $scope from ng-model="$scope.device.Serial" and define $scope.device = {}; outside $scope.addDevice = function(){

$scope.device = {};

$scope.addDevice = function(){ -- you code here -- }

Working code example

 angular.module('inputExample', []) .controller('ExampleController', ['$scope','$http', function($scope,$http) { $scope.val = '1'; $scope.device = {}; $scope.addDevice = function(){ var data = { 'Name' : $scope.device.ChildName, 'Serial' : $scope.device.Serial }; console.log($scope.device.Serial); console.log($scope.device.ChildName); console.log(data); $http.post('http://141.135.5.117:3500/device/register', data) .then(function(response){ console.log(response); console.log(headers); }); } }]); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="inputExample"> <div ng-controller="ExampleController"> <form role="form" class='userForm'> <label for="addDevice">Add Device</label> <input type="text" class="form-control" id="deviceserial" placeholder="Enter serial number" ng-model="device.Serial"> <input type="text" class="form-control" id="Devicechildname" placeholder="Enter baby name" ng-model="device.ChildName"> <button type="submit" class="btn btn-success btn-block" ng-click="addDevice()">Add Device</button> <p>{{device.Serial}}</p> </form> </div> </div>