title: Setting AngularJS ng-model from .NET code behind
body: <p>I know this isn't a good approach or the Angular way of doing things. However, I have a legacy VB.NET application and I've implemented AngularJS in it for doing AJAX requests and working with data and the simplicity (I'm well versed with Angular). </p>
  
  <p>My issue is ng-model overrides the value I retrieve from the server and set to the textbox. I don't really need much databinding but several directives I use 'require ng-model' which messes with the old web forms.</p>
  
  <p>Here's the VB code behind setting the inputs .Text value :</p>
  
  <pre><code>                'Invoiced Date - Load Initial Value Code
                  Try
                      'Dim valNumber As String = JAG.General.modFunctions.FormatFieldValue(oLoadLoadCore.LDC_Number.ToString, "int", "TextBox")
                      Dim valInvoicedDate As String = NASTek.Common.Lib.DB.modADO.GetDataValue("Select convert(varchar,LDC_InvoicedDate,101) from LoadCore where LDC_Key = " &amp; Me.PrimaryKey, Me.conn).ToString
                      Me.txtInvoiced.Text = valInvoicedDate
                      Me.txtInvoiced.Attributes.Add("ng-model", valInvoicedDate.ToString())
                  Catch ex As System.Exception
                      Me.txtInvoiced.Text = ""
                      'Me.Context.Trace.Write("LoadLoadCore.txtInvoiced", "Unable to load initial value: " + ex.ToString() + "")
                  End Try
  </code></pre>
  
  <p>Here's the control being added the the placeholder :</p>
  
  <pre><code>           Me.plhInvoiced.Controls.Add(Me.txtInvoiced)
              Me.txtInvoiced.Attributes.Add("ng-model", "dateInvoiced")
              Me.txtInvoiced.Attributes.Add("datepicker-popup", "MM/dd/yyyy")
              Me.txtInvoiced.Attributes.Add("show-weeks", "false")
              Me.txtInvoiced.Attributes.Add("show-button-bar", "true")
              Me.txtInvoiced.CssClass = "FormTextBox"
              Me.txtInvoiced.TextMode = TextBoxMode.SingleLine
              Me.txtInvoiced.ID = "txtInvoiced"
  </code></pre>
  
  <p>I'm using the AngularUI datepicker directive which requires ng-model, I'm not an expert with directives at this time. I tried removing the ng-model from the 'require' line in the angularui bootstrap.js file and the popup would render without the calendar.</p>
  
  <p>Does anyone know of a work around to this scenario?</p>
  
  <p>Again, I know it's not elegant and the code/app are really awful and old. I hate working on it but I'm trying to make it easier to do simple CRUD operations and displaying data.  If there's no work around then I'll just have to query the info and set it in the js Controller, but I didn't want to have to do that as I don't need the ng-model at this point on these particular fields. I'm mainly trying to run third party calls that render simple data on the webform and that's why I'm not needing the databinding in particular.</p>