title: Setting the value of element inside the angular directive
body: <p>I want to make custom angular directive for placeholder.</p>
  
  <p>The code for the directive is as follows:</p>
  
  <pre><code>class customDirective {
  
  restrict: string = "A";
  link = (scope: ng.IScope,
      instanceElement: ng.IAugmentedJQuery,
      instanceAttributes: ng.IAttributes,
      controller: any,
      transclude: ng.ITranscludeFunction) =&gt; {
      instanceElement.val((&lt;any&gt;instanceAttributes).tsplaceholder);
      instanceElement.on("focus", (eventObj: JQueryEventObject) =&gt; {
          if (instanceElement.val() === (&lt;any&gt;instanceAttributes).tsplaceholder) {
              instanceElement.removeClass("gray-textbox");
              instanceElement.val("");
          }
      });
  
      instanceElement.on("blur", (eventObj: JQueryEventObject) =&gt; {
          if (instanceElement.val() === "") {
              instanceElement.addClass("gray-textbox");
              instanceElement.val((&lt;any&gt;instanceAttributes).tsplaceholder);
          }
      });
      instanceElement.addClass("gray-textbox");
      //instanceElement.attr("value", (&lt;any&gt;instanceAttributes).tsplaceholder);
      //this.$compile(instanceElement.contents())(scope);
  }
  
  }
  
  taxSimpleApp.directive("tsplaceholder", () =&gt; {
  return new customDirective();
  });
  </code></pre>
  
  <p>I am using below html code.</p>
  
  <pre><code>&lt;input name="ssn2"
        id="jenish"
        type="text"
        required                               
        ng-model="myVal" 
        tsplaceholder="XXX-XX-XXXX"&gt;
  </code></pre>
  
  <p>I am using angular with typescript.</p>
  
  <p>but in above example when first view loads it does set the value property to the placeholder we pass. but after the first focus lost it suddenly starts working.</p>
  
  <p>I don't have any idea why value("XXX-XX-XXXX") doesn't appear on first time.</p>
  
  <p>Thanks in advance for any kind help if possible.</p>