JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div id="body">
    <div ng-controller="MyController">
        <ul>
            <li ng-repeat="image in images">
                You can click me:
                <img ng-src="{{image.url}}" ng-click="togglePhoto($index)" />
                You can't click me:
                <img ng-src="{{image.url}}" ng-click="togglePhoto({{$index}})" />
            </li>
        </ul>
    </div>
</div>

CSS

img{
    width:150px;

}

JavaScript

var app = angular.module('app', []);

app.controller('MyController', ['$scope', function ($scope) {
    $scope.images = [
        {url: 'http://bit.ly/1I0mbgl'},
        {url: 'http://bit.ly/1K4lNzE'},
        {url: 'http://bit.ly/1E5WCpZ'},
        {url: 'http://bit.ly/1SkIRcD'}
    ];
    
    $scope.togglePhoto = function(index){
        alert('Clicked image ' + index);
    }
}]);

//bootstrap the application
angular.bootstrap(document.getElementById('body'), ["app"]);