In my Angular controller, I have an HTML file that includes two partials. Here is a simplified version:
HTML:
<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<!-- It calls one of these two partials for a navigation bar. -->
</body>
</html>
HTML 1:
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input type="text" ng-model="name" ng-click="myfunction()">
</div>
HTML 2:
<div ng-controller="myCtrl">
<br>
Person Name: {{new_name}}
</div>
Controller:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "";
$scope.new_name = "";
$scope.getQuery = function() {
$scope.new_name = $scope.name;
};
});
Currently, in HTML 2, {{new_name}} displays as an empty string because it was declared as such in the controller. However, I would like it to dynamically update based on the input from HTML 1. How can I achieve this?