izimodal with angularjs

<!DOCTYPE html>
<html ng-app="demo">

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/izimodal/1.5.1/css/iziModal.css">


</head>

<body ng-controller="demoController">
  
  <button ng-click="trigger()">click me!!</button>

  <div ng-repeat="client in clients">
    <br>
    <button class="trigger" ng-click="triggerModal(client.name)">
        {{initModal(client.name)}}
        {{client.name}}
    </button>

    <div id="{{client.name}}">
      {{client.surname}}
      <button ng-click="trigger()">click me!!</button>
    </div>

  </div>


  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/izimodal/1.5.1/js/iziModal.js"></script>

  <script src="script.js"></script>
</body>

</html>

angular.module("demo", []);

angular
  .module("demo")
  .controller("demoController", ["$scope", function($scope) {

    $scope.initModal = function(id) {
      var str = "#" + id;
      console.log(str);
      $(str).iziModal();
    };


    $scope.triggerModal = function(id) {
      var str = "#" + id;
      console.log(str);
      $(str).iziModal('open');
    };


    $scope.clients = [{
      name: "john",
      surname: "smith",
    }, {
      name: "carl",
      surname: "jones",
    }];

    $scope.trigger = function() {
      alert("this is an alert");
    };


  }]);