I have code like below
<!DOCTYPE html>
<html>
<head>
<!-- CSS (load bootstrap) --> <!-- JS (load angular, ui-router, and our custom js file) -->
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="app1.js"></script>
</head>
<!-- apply our angular app to our site -->
<body ng-app ='directivesModule'>
<div class='main' ng-controller="customersController">
<input type='text' ng-model='firsttext'>
<button name='hello1' ng-click="showsecond = !showsecond;thirdtext='pradeep'">show second</button>
<div class='second' ng-show='showsecond'>
<input type='text' ng-model='secondtext'>
<button name='hello2' ng-click="showthird = !showthird">show third</button>
{{firsttext}}
</div>
<div class='third' ng-if='showthird'>
<input type='text' ng-model='thirdtext'>
<button name='hello' ng-click="changeparent()">hello</button>
{{secondtext}}
{{firsttext}}
</div>
</div>
</body>
</html>
And JS looks like
var app = angular.module('directivesModule', []);
app.controller('customersController', ['$scope', function ($scope) {
$scope.changeparent = function()
{
$scope.firsttext = $scope.thirdtext;
console.log($scope.thirdtext);
};
}]);
May be code is very clear what i am trying to do. So what child value is there i am trying to update the same to first text box. But not possible.I know i can do it either by using emit or passing paramaters to function. BUt is there any other best method to take care of it. Ng-show i dono wanna use as element will be present in DOM.