title: Angular-ui-bootstrap modal and typescript
body: <p>I am using ngDialog with Angular and Typescript however I am trying to change to Angular-ui-boostrap modal as it looks cooler and easier to use.</p>
  <p>I have a scenario that I show a list of records using e.g AddressListController and the user Clicks on a record e.g. an address then I show the Modal so the user can Edit/Delete the record. Alternatively user can select the add to add a new record that should show a modal. I want to delegate the Save / Update / Delete of the record (address) to the address controller e.g. AddressController.</p>
  <p>The problem that I have is that the modal is showing however the data is not populted. I am not sure if I am using the correct syntax in the template? Also, I prefer the controllerAs syntax.</p>
  <p>My code is as following:</p>
  <p><strong>In the list controller:</strong></p>
  <pre><code> selectAddress(index: number): void {
          var address = this.contactAssocitedRecords.Addresses[index];
          this.edit(address);
      }
  
      edit(item: Address) {
  
          var promise = this.addressService.getAddressWithInfo(item.Id);
          promise.then((response: ng.IHttpPromiseCallbackArg&lt;AddressInfo&gt;) =&gt; {
              var addressInfo = response.data;
              console.log(addressInfo); **// This returns all data**
  
              var options: ng.ui.bootstrap.IModalSettings = {
                  templateUrl: &quot;/js/controllers/_MaintainAddress.Html&quot;,
                  controller: 'CRM.Contacts.AddressController as addressCtrl',
                  windowClass: 'app-modal-window',
                  resolve: {
                      addressInfo: () =&gt; addressInfo 
                  }
              };
  
              this.$uibModal.open(options).result
                  .then(updatedItem =&gt; this.savedAddress(updatedItem));
              },
              error =&gt; {
                  this.popupService.showError(error.data.message);
              });
  
       }
  
  
      savedAddress(item: any): void {
          console.log(item);
      }
  </code></pre>
  <p><strong>AddressController:</strong></p>
  <pre><code>module CRM.Contacts {
  
  export class AddressController {
  
      private scope: ng.IScope;
      static $inject = [&quot;$http&quot;, &quot;CRM.Contacts.ContactService&quot;, &quot;CRM.Common.PopupService&quot;, &quot;ngDialog&quot;,
          '$uibModalInstance'];
  
      constructor(private $http: ng.IHttpService, private contactService: ICrudService&lt;Contact&gt;,
          private popupService: CRM.Common.IPopupService,
          private ngDialog: angular.dialog.IDialogService,
          private $uibModalInstance: ng.ui.bootstrap.IModalServiceInstance) {
  
  
      }
  
      save(addressToSave: Address) {
          // TODO: do the actual saving
  
          console.log(addressToSave);
          this.$uibModalInstance.close(addressToSave);
      }
  
  }
  
  angular.module(&quot;CRM&quot;).controller(&quot;CRM.Contacts.AddressController&quot;, AddressController);
  </code></pre>
  <p>}</p>
  <p><strong>Template:</strong></p>
    
          
  <pre><code>        &lt;!-- Form Name --&gt;
          &lt;legend&gt;Edit Address...&lt;/legend&gt;
  
          &lt;!-- Text input--&gt;
          &lt;div class=&quot;form-group col-md-6&quot;&gt;
              &lt;label class=&quot;col-md-4 control-label&quot; for=&quot;Id&quot;&gt;Id:&lt;/label&gt;
              &lt;div class=&quot;col-md-8&quot;&gt;
                  &lt;input id=&quot;Id&quot; name=&quot;Id&quot; ng-disabled=&quot;true&quot; type=&quot;text&quot; ng-model=&quot;addressCtrl.addressInfo.Address.Id&quot; placeholder=&quot;Id&quot; class=&quot; form-control&quot;&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;!-- Text input--&gt;
          &lt;div class=&quot;form-group col-md-6&quot;&gt;
              &lt;label class=&quot;col-md-4 control-label&quot; for=&quot;streetNo&quot;&gt;Street No:&lt;/label&gt;
              &lt;div class=&quot;col-md-8&quot;&gt;
                  &lt;input id=&quot;streetNo&quot; name=&quot;streetNo&quot; type=&quot;text&quot; ng-model=&quot;addressCtrl.addressInfo.Address.StreetNo&quot; placeholder=&quot;Street No&quot; class=&quot; form-control&quot; required=&quot;&quot;&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;!-- Text input--&gt;
          &lt;div class=&quot;form-group col-md-6&quot;&gt;
              &lt;label class=&quot;col-md-4 control-label&quot; for=&quot;streetName&quot;&gt;Street Name:&lt;/label&gt;
              &lt;div class=&quot;col-md-8&quot;&gt;
                  &lt;input id=&quot;streetName&quot; ng-model=&quot;addressCtrl.addressInfo.Address.StreetName&quot; name=&quot;streetName&quot; type=&quot;text&quot; placeholder=&quot;Street Name&quot; class=&quot; form-control&quot; required=&quot;&quot;&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
  
          // removed for brevity
  
          &lt;div class=&quot;form-group col-md-offset-8&quot;&gt;
              &lt;label class=&quot;col-md-4 control-label&quot; for=&quot;save&quot;&gt;&lt;/label&gt;
              &lt;div class=&quot;col-md-8&quot;&gt;
                  &lt;button id=&quot;save&quot; title=&quot;Save new record&quot; data-toggle=&quot;tooltip&quot; data-placement=&quot;right&quot; name=&quot;submit&quot;
                          ng-click=&quot;addressCtrl.save(addressCtrl.addressInfo.Address)&quot; class=&quot;btn btn-success&quot; ng-disabled=&quot;addNewAddress.$invalid&quot;&gt;
                      &lt;span class=&quot;glyphicon glyphicon-floppy-disk&quot;&gt;&lt;/span&gt;
                  &lt;/button&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/fieldset&gt;
  &lt;/form&gt;
  </code></pre>