JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.js"></script>
<div ng-app="app">
    <div ng-controller="playlistsController">
        <div ng-repeat="playlist in playlists">
            <div ng-controller='PlayerController'>
                <input type="text" ng-model="$parent.playlist.id">
                <input type="text" ng-model="$parent.playlist.name">
            </div>
        </div>
    </div>
</div>

CSS

li a {
    background-color: red !important;
    border: 1px solid red !important;
}
li a:before {
    border-left-color: red !important;
}
.green {
    background-color: green !important;
}

JavaScript

var app = angular.module("app", []);
app.controller('playlistsController', function ($scope, $sce) {
    $scope.playlists = [{
        "id": 13,
            "file": {
            "url": "/uploads/playlist/file/18/01_-_MashAllah.mp3"
        },
            "event_id": 23,
        "created_at": "2015-11-11T10:33:52.000Z",
            "updated_at": "2015-11-11T10:33:52.000Z",
            "name": "01 - MashAllah.mp3"
    },

    {
        "id": 19,
            "file": {
            "url": "/uploads/playlist/file/19/02_-_Laapata.mp3"
        },
            "event_id": 19,
        "created_at": "2015-11-11T10:50:01.000Z",
            "updated_at": "2015-11-11T10:50:01.000Z",
            "name": "02 - Laapata.mp3"
    }];
});
app.controller('PlayerController', function ($scope, $sce) {
	console.log($scope.$parent.playlists);
});