How to get the model defined in child's form on parent button click?

Question

Parent.html

<div ng-controller="parentController">

<div ng-include="'views/Child.html'">
</div>

<button ng-click="GetChildModel()">
</button>   

</div>

Child.html

<form ng-controller="childcontroller">
<input type="text" ng-model="child.Firstname">
</input>
 <input type="text" ng-model="child.Lastname">
</input>
</form>

My problem is that i need the model defined in child.html into my parent controller i.e parentController How it can be possible?

Answer 1

Forms can be a controller if you add the "name" attribute

<form name="child">
<input type="text" name="Firstname">
</form>

You can access in parent controller with: $scope.child.Firstname

Answer 2

In your parent controller:

$scope.child = {};
$scope.GetChildModel = function() {
    console.log(angular.toJson($scope.child));
}