$BROADCASTing from service to controller

Question

I have a little concern here

This comes from a service named BetSlipFactory

  removeSlip: function(slip) {

    return betSlipSelectionRequest('/betSlip/removeSelection', {
      game: slip.game,
      pair: slip.pair,
      line: slip.line
    });
  }

Then I have this function in the controller for that service

$scope.removeSlip = function(slip) {

  $rootScope.$broadcast('betSlip:removeLines', slip);
  BetSlipFactory.removeSlip(slip)

}

Next I have a controller in a different scope named LinesCtrl and I have this function here which calls a couple functions from the service BetSlipFactory which is like a kind of toggle function

$rootScope.$on('betSlip:removeLines', function(event, slip) {
  if (slip) {
    BetSlipFactory.remove(line, row, type);
  };
});

$scope.addLineToBetSlip = function(line, row, type) {
  var spreadSelected = (row.spreadSelected && type === 'spread'),
    totalSelected = (row.totalSelected && type === 'total'),
    moneyLineSelected = (row.moneyLineSelected && type === 'moneyline');
  if (spreadSelected || totalSelected || moneyLineSelected) {

    BetSlipFactory.remove(line, row, type);

  }else {

    BetSlipFactory.add(line, row, type);

  }
};

And then the HTML:

     <button ng-click="removeSlip(slip)"></button>

And:

     <td ng-class="!row.moneyLineSelected ? 'lines-hover' : 'line-selected'">
        <a ng-click="addLineToBetSlip(line, row, 'moneyline')">
           <span ng-hide="row.noMoneyLine">{{:: row.moneyLine}}</span>
        </a>
     </td>

What I need: combine the scopes, when the function $scope.removeSlip(slip) is call, also I need to call $scope.addLineToBetSlip(line, row, type) and then that function should call BetSlipFactory.remove(line, row, type); as it is within that if statement.

When I call $scope.removeSlip(slip) I need to kill slip parameter, within the scope of BetSlipFactory everything works great.

I recorded a video for you to see what I am talking about, let me explain the video a little bit.

In the first 2 tries you might see that I am able to select and deselect and everything works great, but in the 3rd and 4th try, you see that I select a line, and then I go a call and removeSlip(slip) when I play the X on the right, and in order to deselect the line on the left I have to do it manually.

Answer 1

So I started a fiddle showing this process dumbed way down compared to the plnkr you started after. Here I am using two separate controllers and a service (factory) to manage the data. This can be done without using $rootScope or $broadcast. Hopefully you can take what I have done here and integrate it into all that code you posted on plnkr. Below you can see it is quite a simple process

the jsfiddle

HTML:

<div ng-app="TestApp">
    <div id="colLeft" ng-controller="LeftController">
        <div ng-repeat="bet in possibleBets">
            <button ng-class="!bet.moneyLineSelected ? 'lines-hover' : 'line-selected'" ng-click="addLineToBetSlip(bet)">{{bet.name}}</button>
        </div>
    </div>
    <div id="colRight" ng-controller="RightController">
        Your Bets:<br>
        <div ng-repeat="bet in bets">
            Active bet: {{bet.name}} - <button ng-click="removeLineFromBetSlip(bet)">&times;</button>
        </div>
    </div>
</div>

CSS:

.lines-hover {

}

.line-selected {
    background:yellow;
}

#colLeft {
    width:65%;
    background:#f00;
    float:left;
}

#colRight {
    width:35%;
    background:gray;
    float:left;
}

and finally the JS

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

app.controller('LeftController', function($scope, BetSlipFactory)
{
    // this data is the data from your DB
    $scope.possibleBets = [
        {name:'Bet 1',moneyLineSelected:false},
        {name:'Bet 2',moneyLineSelected:false},
        {name:'Bet 3',moneyLineSelected:false}
    ];

    // now that I think about it, addLineToBetSlip is not a good name
    // since it actually toggles the bet
    $scope.addLineToBetSlip = function(bet)
    {
        bet.moneyLineSelected = !bet.moneyLineSelected; // toggle the moneyLineSelected boolean
        (bet.moneyLineSelected) ? BetSlipFactory.add(bet) : BetSlipFactory.remove(bet); // add or remove the bet
    };
});

app.controller('RightController', function($scope, BetSlipFactory)
{
    $scope.bets = BetSlipFactory.getAllBets(); // link to all the active bets

    // remove the bet from the factory
    $scope.removeLineFromBetSlip = function(bet)
    {
        bet.moneyLineSelected = false;
        BetSlipFactory.remove(bet);
    };
});

app.service('BetSlipFactory', function()
{
    //a place to keep active bets
    var theBets = [];
    return {
        add: function(bet)
        {
            // actually add the bet to this local array
            theBets.push(bet);
        },
        remove: function(bet)
        {
            // you should do error checking of the index before removing it
            var index = theBets.indexOf(bet);
            theBets.splice(index,1);
        },
        getAllBets: function()
        {
            //simply return all active bets
            return theBets;
        }
    }
});

function log(msg)
{
    console.log(msg);
}