title: How to Initialize SharePoint Script Editor WebPart Content using AngularJS
body: <p>I am having a problem getting initial values to bind using a SharePoint Script WebPart and AngularJS. I have tried all the different ways to initialize ng-int, custom init function, document ready. In all cases the function is being called and values set but the UI is not updating with the values until I interact with the controller again.</p>
  
  <p>In the code below it is the {{usertitle}} that does not bind.</p>
  
  <p>So the direct question would be what is the proper way to successfully Initialize values in the context of SharePoint, Script WebPart, and AngularJS?</p>
  
  <p>Just to show what the UI does look like after load, other bindings are populated but not usertitle.
  <a href="https://i.stack.imgur.com/pKEJ4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pKEJ4.png" alt="enter image description here"></a></p>
  
  <p>Click Next Button and then Previous (function is not called during this).</p>
  
  <p><a href="https://i.stack.imgur.com/oEnLJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oEnLJ.png" alt="enter image description here"></a></p>
  
  <p>HTML in Script Editor
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="appDiv" ng-app="myapp"&gt;
          &lt;div id="controllerDiv" ng-controller="MyController" &gt;
                  &lt;div class="item10 mainborder"&gt;
                      &lt;div ng-show=showPage1() ng-init="firstFunction(this)"&gt;
                              &lt;p class="lead"&gt;Welcome {{usertitle}}!&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;input type="button" value="Previous" ng-click="pagePrevious()" ng-disabled=showPage1() /&gt;
                          &lt;span&gt;{{pageXofY()}}&lt;/span&gt;
                          &lt;input type="button" value="Next" ng-click="pageNext()" ng-disabled=showPage6() /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Angular Controller JS</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>        $scope.firstFunction = function ($scope) {
              //User Info-------------------------------------
              var userid = _spPageContextInfo.userId;
              var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/getuserbyid(" + userid + ")";
  
              var requestHeaders = { "accept": "application/json;odata=verbose" };
              $.ajax({
                  url: requestUri,
                  contentType: "application/json;odata=verbose",
                  headers: requestHeaders,
                  success: onSuccessUInfo,
                  error: onErrorUInfo
              });
  
              function onSuccessUInfo(data, request) {
                  $scope.usertitle = data.d.Title;
                  $scope.email = data.d.Email;
                  $scope.loginname = data.d.LoginName;
                  //alert(loginName);
              }
  
              function onErrorUInfo(error) {
                  alert("error");
              }
  
          //End USeriNfo------------------------------------
          };</code></pre>
  </div>
  </div>
  </p>