How can i load data to AngularJS modal?

Question

I have a few questions :

1. How can i load data to content in angular modal?
2. How can i load custom data for any selected item? .............................................................

This is my code:

HTML

<section  ng-controller="ServicesController">
 <div ng-click="toggleModal()" ng-repeat="item in items" class="col-md-4">
      {{ item.name }}
 </div>
     <modal visible="showModal">

    </modal>
</section>

CONTROLLER.JS

myApp.controller('ServicesController', function ($scope) {

$scope.items = [
        {
            "name": "product1",
            "image": "images/img1.jpg",
            "id": "1"
        },
        {
            "name": "product2",
            "image": "images/img2.jpg",
            "id": "2"
        },
        {
            "name": "product3",
            "image": "images/img3.jpg",
            "id": "3"
        },
    ]
      $scope.showModal = false;
      $scope.toggleModal = function(){
      $scope.showModal = !$scope.showModal;
 };
});

 myApp.directive('modal', function () {
     return {
  template: '<div class="modal fade">' + 
      '<div class="modal-dialog">' + 
        '<div class="modal-content">' + 
          '<div class="modal-header">' + 
            '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' + 
            '<h4 class="modal-title">{{ title }}</h4>' + 
          '</div>' + 
          '<div class="modal-body" ng-transclude></div>' + 
        '</div>' + 
      '</div>' + 
    '</div>',
  restrict: 'E',
  transclude: true,
  replace:true,
  scope:true,
  link: function postLink(scope, element, attrs) {
    scope.title = attrs.title;


    scope.$watch(attrs.visible, function(value){
      if(value == true)
        $(element).modal('show');
      else
        $(element).modal('hide');
    });
  }
    };
});

Answer 1

Looking at the Directives documentation, you will see that they can have a isolated scope, using the sintax:

return {
    restrict: 'E',
    scope: {
      items: '='
    },
    ...
};

Using it, you can insert a property in your tag like:

<my-directive items="items" ></my-directive>

The items, will then be injected in the scope of the directive.

Answer 2

you can try this simplest working code(can load data from api also)

HTML CODE:

    <button type='button' class='btn btn-primary btn-sm btnmargin' 
data-toggle='modal' data-target='#cInfo' data-ng-click='moreinfo(customer)'
 >more info</button>

Inside Controller code will be:

    $scope.customerinfo=[];
$scope.moreinfo= function(customer){
          $scope.customerinfo= customer;
};

HTML Bootstrap Model code:

    <!-- Modal start -->
    <div class='modal fade' id='cinfo' tabindex='-1' role='dialog' 
aria-labelledby='myModalLabel' aria-hidden='true'>
        <div class='modal-dialog modal-lg' role='document'>
            <div class='modal-content'>
                <div class='modal-header'>
                    <button type='button' class='close' data-dismiss='modal'>
                       <span aria-hidden='true'>&times;</span>
                       <span class='sr-only'>Close</span></button>
                        <h4 class='modal-title text-danger' 
                         id='myModalLabel'>customer info</h4>
                </div>
                <div class='modal-body'>
                     {{customerinfo.firstName}}
                </div>
            <div class='modal-footer'>
               <button type='button' class='btn btn-default' 
            data-dismiss='modal'>close</button>
            </div>
        </div>
    </div>
  </div>
  <!-- Modal end -->