Popular angular data

I have this mod created in html

<div class="portfolio-modal modal fade" id="automaticBasket" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="close-modal" data-dismiss="modal"><i class="fa fa-times-circle-o fa-3x"></i>
                </div>
                <div class="container" style="width:inherit; height:inherit;">
                    <div class="row" >
                        <div class="col-lg-8 col-lg-offset-2" >
                            <div class="modal-body">
                                <!-- Project Details Go Here -->
                                <h2>Custom Basket</h2>
                                <br>
                                <p ng-repeat="prods in vm.listProdsCarAut">@{{prods.nome}}@{{prods.quantidade}}</p>
                                <br>
                                <h4>Price: X </h4>
                                <br>

                                <button type="button" class="btn btn-primary" ng-click="vm.addCar()" data-dismiss="modal" >Donate</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

I use ng-repeat to populate information in the modal, the problem is that the modal is loaded when opening the page and as such my array has size 0, I only change the array when I click on a button as I show below

  vm.fillModal = function(){
  for(var i = 0; i< bd.length; i++){
          alert("PRODUTOS: "+ bd[i].nome+", Quantidade "+bd[i].quantidade); 
          vm.listProdsCarAut.push(angular.copy(bd[i]));
        }}

Any way to get past this? I already thought of just loading the modal into the page after loading the button but I do not know if this is possible.