JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<body ng-app="myApp">
  <div ng-controller="myCtrl">
    <playbtn ng-click="toggleBtn();" autoplay="autoplay"><i class="ion-ios-play"></i></playbtn>
  </div>
</body>

JavaScript

angular.module('myApp', [])

.controller('myCtrl', function($scope) {
		
    $scope.autoplay = true;
		
		$scope.toggleBtn = function() {
		$scope.autoplay = ($scope.autoplay == true ?  false : true);
		alert($scope.autoplay);
    }
  })
  .directive('playbtn', function() {
    return {
      restrict: 'E',
      scope: {autoplay:'='},
      template: '<i ng-class="{\'ion-ios-play\': autoplay, \'ion-ios-pause\': !autoplay}"></i>'
    }
  })