JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp" ng-controller="myVm">
    {{audio}}<br>
    <log-player audio="audio"></log-player>
</div>

JavaScript

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

angular.module("myApp").controller("myVm", function($scope) {
     var vm = $scope;
     vm.audio = [{title: "One"}, {title: "Two"}];
});

angular.module("myApp").directive('logPlayer', function() {
    return {
        restrict: 'E',
        //replace: true,
        scope: {audio: '='},
        controller: function($scope) {
            $scope.play = function(index) {
                console.log("play clicked "+index);
            };
        },
        template: '<div ng-repeat="sample in audio">' +
        '{{sample.title}}' +
        '<button type="button" ng-click="play($index)">Play</button>' +
        '<button type="button" ng-click="stop($index)">Stop</button>' +
        '</div>'
    };
});