The reason you can’t access the input is because the Foundation tab (or ng-repeat
?) creates an isolate scope. One way to address this is using the controller as syntax:
<div ng-controller="MyController as ctrl">
<!-- an example of a directive that would create an isolate scope -->
<div ng-if="true">
<form name="ctrl.myForm">
...inputs
Dirty? {{ctrl.myForm.$dirty}}
<button ng-click="ctrl.saveChanges()">Save</button>
</form>
</div>
</div>
Then you can access the FormController in your code like:
function MyController () {
var vm = this;
vm.saveChanges = saveChanges;
function saveChanges() {
if(vm.myForm.$valid) {
// Save to db or whatever.
vm.myForm.$setPristine();
}
}