JSFiddle - React, Tailwind, and code Playground

by Ahmad Baktash Hayeri

HTML

<div ng-controller="myCtrl as wos">
  <div ng-form="wos.wordFormNgForm_{{wf.wordFormId}}" ng-repeat="wf in wos.word.wordForms">
    <pre>{{ wos | json }}</pre>
    <button ng-click="wos.setDirty(wf)">
      Set Dirty
    </button>
  </div>
  <button ng-click="wos.wordFormAdd()">
    Add Form
  </button>
</div>

CSS

pre {
  padding: .3rem;
  border: 1px solid gray;
  background: #e3e3e3;
  line-break: strict;
}

[ng-form] {
  border: 1px solid green;
  padding: .4rem;
}

JavaScript

var wordFormController = function($timeout) {
  this.word = {
    wordForms: []
  };
  this._timeout = $timeout;
};

wordFormController.prototype = {
  wordFormAdd: function(something) {
    var self = this;
    this.wordFormId = Math.floor(Date.now() / 1000);
    /*var emptyWordForm: IWordForm = <IWordForm>{
        wordId: this.word.wordId,
        wordFormId: this.wordFormId,
        posId: 1,
        statusId: Status.New
    };*/
    var emptyWordForm = {
      wordFormId: this.wordFormId,
    };
    this._timeout(function(){ 
    	// remove this portion from the `this._timeout` and then check your console
       var wordFormNgForm = "wordFormNgForm_" + emptyWordForm.wordFormId;
       console.log(self[wordFormNgForm]);
       //self["wordFormNgForm_" + emptyWordForm.wordFormId].$setDirty();
    });
    this.word.wordForms.push(emptyWordForm);
  },
  setDirty: function(wf) {
    var self = this;
    console.log(wf.wordFormId)
    console.log(self["wordFormNgForm_" + wf.wordFormId]);
    self["wordFormNgForm_" + wf.wordFormId].$setDirty();
  }
}


angular.module('app', [])
  .controller('myCtrl', wordFormController);