I have two controllers at the moment, one is a form where a user inputs a value and the other is a graph that renders based on an api search. I would need to refresh or re run the second controller based on the input from the first. I am almost certain this is bad design on my part but have not found the ideal way to do it.
HTML code:
<html>
<body>
<!-- this is the graph generator-->
<div ng-controller="GraphAppCtrl"></div>
<!-- this is th form submittal section-->
<div ng-controller="FormCtrl" id="FormCtrl">
<form novalidate class="simple-form">
Name: <input type="text" ng-model="tech"/><br />
<button ng-click="submit(tech)">Submit</button>
</form>
</div>
</body>
</html>
Angular Code:
var app = angular.module('testApp', []);
app.controller('FormCtrl', function ($scope) {
$scope.submit = function(tech){
// Need to be able to call the function that generates graph and pass it the tech value
}
}
app.controller('GraphAppCtrl', function ($scope) {
//here I do a bunch of stuff to generate graph, like http request from third party api etc.
}
What is happening now since I have a reference to the graph controller in the my index.html page it renders the first time based on default parameters, but I would need it to render based on the submit.
I have looked Directives and experimented with the answer in this question but it seems as Directives more of a solution to pass data between controllers rather than what I am trying to do.
