Angular JS access form in scope inside Angular Bootstrap tab

Question

I have a form in an Angular JS 1.4.1 prototype. I have a class on it set when it's dirty. I am trying to simulate someone "saving" the form, and therefore it's not dirty, it's "saved" so the changes are still present, but no longer dirty.

Form fragment:

<div class="override">
  <tabset>
    <tab heading="My Tab">
      <form name="overridesForm">
        <p><input ng-model="rd.isOverriden" type="checkbox"> Foobar</p>
        <div class="buttons save-cancel">
          <button class="btn btn-default btn-xs" ng-click="overridesForm.reset();overridesForm.$setPristine()">Cancel</button>
          <button class="btn btn-primary btn-xs" ng-click="overridesForm.$setPristine()">Save with Inline</button>
          <button class="btn btn-primary btn-xs" ng-click="saveData()">Save with Inline</button>
        </div>
      </form>
    </tab>
    <tab heading="Some other Tab">
      blah
    </tab>
  </tabset>
</div>

Setting the form to pristine only works for me inline, not in a function in the controller. So this works:

<button ng-click="overridesForm.$setPristine()">Save</button>

But not this:

<button ng-click="saveData()">Save</button>

//controller:
$scope.saveData = function () {
    $scope.overridesForm.$setPristine();
    toastr.success('Success', 'Data was saved.');
  };

I get a runtime error "no object overridesForm defined".

For reasons I have yet to figure out, it works in this codepen but not my project.

UPDATE:

After searching about accessing a form in trancluded content, I hit upon this:

 <button ng-click="saveData(overridesForm)">Save with Inline</button>

and assign this in controller:

  $scope.saveData = function(form) {
    $scope.overridesForm = form;
    $scope.overridesForm.$setPristine();
  };

Not sure if this is best practice, but it works. Updated the codepen.

Spanos

Do you set the form name to be able to access it in the scope? We need to see more code – Hudak

Yes. Added the form code for clarity. – Spanos

A plunkr would be great to be able to test it – Hudak

i added a codepen and it works there. still stuck on why not in my project. – Spanos

I should add that this form is inside an Angular UI tab! I have a feeling that is what my problem is; it is not part of the scope since the angular UI tab transcludes it. – Spanos

Try and add the UI tabs to your codepen. You might find the problem yourself while doing it – Hudak

I just did that. Not working. What I need to figure out is how -- or if -- I can access the form in an ng-transclude. I see it in my ng-inpector. – Spanos