Bootstrap modal Bind Data using Angular not Binding

Question

Hi I used follow Modalpopup of bootstrap Now using Angular at controller side I get data in $scope.tags variable. Here I want to bind data on web page using ng-repeat="vendor in tags".

.HTML

<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Tags To Image</h4>
  </div>
  <div class="modal-body">
      <div style="padding: 20px;" ng-repeat="vendor in tags">
          <div class="col-md-4">
            <select
              data-placeholder="Select Type"
              class="form-control"
              chosen
              ng-model="vendor.type"
              ng-options="item for item in vendorTypes">
            </select> 
          </div>
          <div class="col-md-4">
            <select
              data-placeholder="Select Vendor"
              class="form-control"
              chosen
              ng-model="vendor.vendor"
              ng-options="item.id as item.business.name for item in vendors">
            </select> 
          </div>
          <div class="col-md-4">
            <a class="btn btn-primary" ng-click="item.vendors.splice(item.vendors.indexOf(vendor), 1)"> - </a>
          </div>
        <!-- </div> -->
      </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>

When click on button Than I get event of Modal popup.

    $('#myModal').on('show.bs.modal', function(e) {
      indaaix = $(e.relatedTarget).context.value;

      $scope.tags = $scope.tags = [{
           type: "Event planner",
           vendor: "cus_7VTYxJ64KZ6Iaz"
         }];
        console.log($scope.tags);
      }
    });

Please try to help me, Data not binding on webpage. where was I mistake please leave comment or Answer so I can TEST it. Thanks.

MarkoCen · Accepted Answer · 2016-04-28 17:24:47Z

1

jQuery event handler would not trigger angular scope digesting, so angular would not know the changes in that handler, you should explicitly trigger scope digesting in event handler:

 $('#myModal').on('show.bs.modal', function(e) {
     $timeout(function(){
         indaaix = $(e.relatedTarget).context.value;

         $scope.tags = $scope.tags = [{
           type: "Event planner",
           vendor: "cus_7VTYxJ64KZ6Iaz"
         }];
     })

 });

$timeout service would call scope.$digest internally

answered Apr 28, 2016 at 17:24

MarkoCen

2,35417 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gunjan Patel Over a year ago

Thanks. Help me a lot

Collectives™ on Stack Overflow

Bootstrap modal Bind Data using Angular not Binding

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related