Parent scope

by paperelectron

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>
<div ng-controller="list">
    <span>Click on a "play button"</span>
    <br>
    <input type="text" ng-model="q" placeholder="filter">
    <ul ng-repeat="l in list | filter:{rating: q}">
        <li>Name: {{l.name}} Rating: {{l.rating}}
            <button ng-click="play(l)">play</button>
        </li>
    </ul>
    <hr>
    
    <div ng-controller="player" ng-show="playing">
         <h3>{{playing.name}} <span>{{playing.rating}}/10</span></h3>

        <ul class="rate" ng-repeat="n in [1,2,3,4,5,6,7,8,9,10]">
            <li ng-click="rate(n)">{{n}}</li>
        </ul>
    </div>

CSS

h3 {font-size: 5em; }
span {color: red;}
.rate ul li { display: inline; color: blue; }
.rate li {
  color: blue; 
  list-style-type: none;
  padding-right: 20px;
  float: left;}

JavaScript

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

function player($scope) {
    $scope.$on("playThis", function thisPlayer(event, data){
        console.log(event, data)
        $scope.playing = data
    });
    $scope.rate = function(n){
        $scope.playing.rating = n
    }
}

function list($scope) {
    $scope.list = [
        {name: "derp", rating: 5, id:1},
        {name: "herp", rating: 3, id:2},
        {name: "berp", rating: 5, id:3},
        {name: "serp", rating: 9, id:4},
        {name: "jerk", rating: 8, id:5},
        {name: "purp", rating: 1, id:6} ]
    
    $scope.play = function(s){
        console.log(s)
        $scope.$broadcast("playThis", s)
    }
    
}