<!DOCTYPE html>
<html>
  <head>
    <script data-require="angular.js@1.3.5" data-semver="1.3.5" src="https://code.angularjs.org/1.3.5/angular.js"></script>
    <script data-require="lodash.js@*" data-semver="4.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.5.0/lodash.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-app="starter" ng-controller="geoCtrl">
    <input type="checkbox" ng-model="j5" ng-change="filtroJugadores()">J5
    <input type="checkbox" ng-model="j9" ng-change="filtroJugadores()">J9
  </body>

</html>
var myApp = angular.module('starter', [])

myApp.controller('geoCtrl', function($scope){

    var filtro = [];
    var index;

    $scope.filtroJugadores = function(){

        //jugadores5
        if($scope.j5===true){
            var j5 = _(filtro).push({'jugadores5':true});
            j5 = j5.commit();                
        }else{
            filtro = _.dropWhile(filtro, {'jugadores5':true});
            //index = _.indexOf(filtro, _.find(filtro, {'jugadores5':true}));
            //if (index >= -1){filtro.splice(index, 1, {'jugadores5':false})};
        }
        filtro = _.uniqBy(filtro, 'jugadores5');

        //jugadores9
        if($scope.j9===true){
            var j9 = _(filtro).push({'jugadores9':true});
            j9 = j9.commit();                
        }else{
            filtro = _.dropWhile(filtro, {'jugadores9':true});
            //index = _.indexOf(filtro, _.find(filtro, {'jugadores9':true}));
            //if (index != -1){filtro.splice(index, 1, {'jugadores9':false})};
        }
        filtro = _.uniqBy(filtro, 'jugadores9');


        //filtro = _.dropWhile(filtro, {jugadores5:false});
        //filtro = _.dropWhile(filtro, {jugadores9:false});

        console.log(filtro);
    }
});



/* Styles go here */