We Keep Coding

I have two interdependent checkboxes where 1st checkbox have api call on change event and 2nd gets populated. I need to remember checked items of 2nd

I have two interdependent multiselect checkboxes dropdowns where 1st checkbox have api call on change event and 2nd gets populated. So whenever i check items from 2nd dropdown and I decide to check another item from 1st dropdown my checked items from 2nd dropdown gets re populated with fresh data. I need to remember checked items from 2nd dropdown doesn't matter how many times I recheck items of 1st dropdown.
HTML
<label class="form-label">Clients<span class="mandatory">*</span></label>
<div class="accordion" id="accordionExample">
<div class="card">
<div class="" id="headingOne">
<h2 class="mb-0">
<button [class.ifinvalid]="clientError" class="btn btn-link btn-block text-left d-flex align-items-center justify-content-between"
type="button" (click)="showClient = true" data-toggle="collapse" data-target="#collapseOne"
aria-expanded="true" aria-controls="collapseOne" style="text-decoration: none;">
<div style="color:black">Select Clients</div>
<img _ngcontent-pyg-c117="" class="arrow" src="assets/images/newimage/Icons/Home/arrow-down.svg"
alt="">
</button>
</h2>
</div>
<div id="collapseOne" *ngIf="showClient" class="collapse" aria-labelledby="headingOne"
data-parent="#accordionExample">
<div class="" style="color: #495057;border-top: 1px solid #dedede;">
<div class="card-header projectNarrative" id="headingOne" style="padding: 0.1rem 0.15rem;">
<label class="custom-control material-checkbox d-flex">
<input type="checkbox" [(ngModel)]="masterSelectedClient" name="list_name_tech" value="m1"
(change)="checkUncheckAllClient()" />
<span class="material-control-description btn"
style="color: #495057;padding: 0;font-weight: 500;margin-left: 10px;">All</span>
<span style="color: #495057;padding: 0;font-weight: 500;margin-left: 10px;">(Selected :
{{tempArr2.client.length}})</span>
<span class="material-control-indicator"></span>
<input type="text" class="localSearchInput form-control" [(ngModel)]="searchClient"
name="searchClient" placeholder="{{ 'Search' }}"
style="width:130px; border: 1px solid rgb(189, 189, 189); height: 23px; position: absolute;right: 3%;">
</label>
</div>
<div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordion1">
<div class="card-body" style="padding-left: 0rem; height: 120px; overflow: auto; padding-top: 0px;"
>
<li class="list-group-control"
*ngFor="let client of clientCollection| searchdata: searchClient">
<label class="custom-control material-checkbox d-flex">
<input name="{{client.clientName }}" type="checkbox"
(change)="onChangeSelectClient($event,client)" class="material-control-input"
[checked]="client.clientCode == true" style="margin-left: 2px;">
<span class="material-control-description"
style="margin-left: 10px;">{{client.clientName}}</span>
<span class="material-control-indicator"></span>
</label>
</li>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="errorDiv" *ngIf="submitClicked && clientError">
<small class="text-danger" *ngIf="clientError">Client is required</small>
</div>
</div>
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6" (clickOutside)="showtech = false" style="margin-bottom: 20px;">
<label class="form-label">Project<span class="mandatory">*</span></label>
<div class="accordion" id="accordionExample">
<div class="card">
<div class="" id="headingOne">
<h2 class="mb-0">
<button [class.ifinvalid]="techError" class="btn btn-link btn-block text-left d-flex align-items-center justify-content-between"
type="button" (click)="showtech = true" data-toggle="collapse" data-target="#collapseOne"
aria-expanded="true" aria-controls="collapseOne" style="text-decoration: none;">
<div style="color:black">Select Project</div>
<img _ngcontent-pyg-c117="" class="arrow" src="assets/images/newimage/Icons/Home/arrow-down.svg"
alt="">
</button>
</h2>
</div>
<div id="collapseOne" *ngIf="showtech" class="collapse" aria-labelledby="headingOne"
data-parent="#accordionExample">
<div class="" style="color: #495057;border-top: 1px solid #dedede;">
<div class="card-header projectNarrative" id="headingOne" style="padding: 0.1rem 0.15rem;">
<label class="custom-control material-checkbox d-flex">
<input type="checkbox" [(ngModel)]="masterSelectedTech " name="list_name_tech" value="m1"
(change)="checkUncheckAllTech()" />
<span class="material-control-description btn"
style="color: #495057;padding: 0;font-weight: 500;margin-left: 10px;">All</span>
<span style="color: #495057;padding: 0;font-weight: 500;margin-left: 10px;">(Selected :
{{tempArr1.tech.length}})</span>
<span class="material-control-indicator"></span>
<input type="text" class="localSearchInput form-control" [(ngModel)]="searchTech"
name="searchTech" placeholder="{{ 'Search' }}"
style="width:130px; border: 1px solid rgb(189, 189, 189); height: 23px; position: absolute;right: 3%;">
</label>
</div>
<div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordion1">
<div class="card-body" style="padding-left: 0rem; height: 120px; overflow: auto; padding-top: 0px;"
>
<li class="list-group-control"
*ngFor="let tech of adminTechCollection| searchdata: searchTech">
<label class="custom-control material-checkbox d-flex">
<input name="{{tech.projectName }}" type="checkbox"
(change)="onChangeSelectTech($event,tech)" class="material-control-input"
[checked]="tech.technologyCode == true" style="margin-left: 2px;">
<span class="material-control-description"
style="margin-left: 10px;">{{tech.projectName}}</span>
<span class="material-control-indicator"></span>
</label>
</li>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="errorDiv" *ngIf="submitClicked && techError">
<small class="text-danger" *ngIf="techError">Project is required</small>
</div>
</div>
TS
`
/*----------------------------Function to get Checkbox ID's(Project)-------------------------*/
onChangeSelectTech(event, tech: any, masterSelectedTech: any) {
this.techError = false;
if (masterSelectedTech !== undefined) {
if (!masterSelectedTech) {
let removeIndex = this.tempArr1.tech.findIndex(
(itm) => itm.projectId === tech.projectId
);
if (removeIndex == -1) {
const obj = {
projectId: tech.projectId,
};
this.tempArr1.tech.push(obj);
}
} else {
let removeIndex = this.tempArr1.tech.findIndex(
(itm) => itm.projectId === tech.projectId
);
if (removeIndex !== -1) {
this.tempArr1.tech.splice(removeIndex, 1);
}
}
} else {
if (event.target.checked) {
let removeIndex = this.tempArr1.tech.findIndex(
(itm) => itm.projectId === tech.projectId
);
if (removeIndex == -1) {
const obj = {
projectId: tech.projectId,
};
this.tempArr1.tech.push(obj);
// PGCS
// this.adminTechCollection[tech.technologyId - 1].technologyCode = true; //bytechID
this.adminTechCollection[tech.indexCount - 1].technologyCode = true;
}
} else {
let removeIndex = this.tempArr1.tech.findIndex(
(itm) => itm.projectId === tech.projectId
);
if (removeIndex !== -1) {
// PGCS
// this.adminTechCollection[tech.technologyId - 1].technologyCode = false; //bytechID
// console.log( );
this.adminTechCollection[tech.indexCount - 1].technologyCode = false;
this.tempArr1.tech.splice(removeIndex, 1);
}
}
}
if (masterSelectedTech === undefined) {
if (this.adminTechCollection.length == this.tempArr1.tech.length) {
this.masterSelectedTech = true;
} else {
this.masterSelectedTech = false;
}
}
if (this.tempArr1.tech.length == 0) {
this.techAddError = false;
}
console.log(this.tempArr1.tech);
}
/*----------------------------Function to get Checkbox ID's(Client)-------------------------*/
onChangeSelectClient(event, client: any, masterSelectedClient: any) {
this.clientError = false;
if (masterSelectedClient !== undefined) {
if (!masterSelectedClient) {
let removeIndex = this.tempArr2.client.findIndex(
(itm) => itm.clientId === client.clientId
);
if (removeIndex == -1) {
const obj = {
clientId: client.clientId,
};
this.tempArr2.client.push(obj);
}
} else {
let removeIndex = this.tempArr2.client.findIndex(
(itm) => itm.clientId === client.clientId
);
if (removeIndex !== -1) {
this.tempArr2.client.splice(removeIndex, 1);
}
}
} else {
if (event.target.checked) {
let removeIndex = this.tempArr2.client.findIndex(
(itm) => itm.clientId === client.clientId
);
if (removeIndex == -1) {
const obj = {
clientId: client.clientId,
};
this.tempArr2.client.push(obj);
// PGCS
// this.adminTechCollection[tech.technologyId - 1].technologyCode = true; //bytechID
this.clientCollection[client.indexCount - 1].clientCode = true;
}
} else {
let removeIndex = this.tempArr2.client.findIndex(
(itm) => itm.clientId === client.clientId
);
if (removeIndex !== -1) {
// PGCS
// this.adminTechCollection[tech.technologyId - 1].technologyCode = false; //bytechID
this.clientCollection[client.indexCount - 1].clientCode = false;
this.tempArr2.client.splice(removeIndex, 1);
}
}
}
if (masterSelectedClient === undefined) {
if (this.clientCollection.length == this.tempArr2.client.length) {
this.masterSelectedClient = true;
} else {
this.masterSelectedClient = false;
}
}
console.log(this.tempArr2);
this.passedArray = this.tempArr2.client.map(function(element){
return `${element.clientId}`;
})
console.log(this.passedArray)
this.selectChangeHandler(event);
}
//Api call change function
selectChangeHandler(event:any){
console.log("weee");
// this.tempArr1.tech=[]
this.clientId = event.target.value;
this.api.GetProjectList(this.passedArray).subscribe({
next:(data:any)=>{
if (data.success) {
console.log(data);
this.adminTechCollection = [];
for (let i = 0; i < data.data.length; i++) {
this.adminTechCollection.push(data.data[i]);
}
console.log(this.adminTechCollection);
}
}
})
}
`

Looking for a Dual Listbox with AngularJS and Bootstrap

I am looking for a component like this to be included in my project:
http://geodan.github.io/duallistbox/sample-100.html
I want to install it with npm.
The problem is that I tested some of the examples which are over there, but without success (I get exceptions, or there is no npm, only bower)
These are the examples I tested.
https://github.com/alexklibisz/angular-dual-multiselect-directive
https://github.com/frapontillo/angular-bootstrap-duallistbox
http://www.bootply.com/mRcBel7RWm
Any recommendations about one with AngularJs, Bootstrap, and npm?

This might solve your requirement: Dual list Box
app.js
angular.module('plunker', [])
.controller('MainCtrl', function($scope, utils) {
$scope.list1 = [],
$scope.list2 = [];
utils.insertData($scope.list1, 5);
})
.factory('utils', function Utils() {
return {
insertData: function(list, numItems) {
for (var i = 0; i < numItems; i++) {
list.push({
id: i + 1,
title: 'item' + (i + 1)
});
}
},
getIndexesFromList: function(list) {
var newList = [];
for (var i in list) {
if (typeof list[i].id === "number" && newList.indexOf(list[i].id) === -1) newList.push(list[i].id)
}
return newList;
},
getAllSelectedItems: function(list) {
var newList = [];
newList = list.filter(function(el) {
return el.active === true;
});
return newList;
},
addListIfNoExists: function(list2, newListToAppend) {
var indexes = this.getIndexesFromList(list2);
var newList = [];
for (var i in newListToAppend) {
if (indexes.indexOf(newListToAppend[i].id) === -1) list2.push(newListToAppend[i])
}
return list2;
}
}
})
.directive('dualList', function(utils) {
function _controller($scope) {
$scope.selectAllItem = function(list, checked) {
list.map(function(item) {
item.active = checked
return item;
});
};
$scope.getAllSelectedItems = function(list) {
return utils.getAllSelectedItems(list);
}
$scope.moveItemToRightList = function() {
var newListToAppend = $scope.list1.filter(function(el) {
if (el.active === true) {
el.active = false;
return el;
}
});
if (newListToAppend.length > 0) {
$scope.list1 = $scope.list1.filter(function(el) {
return utils.getIndexesFromList(newListToAppend).indexOf(el.id) === -1;
});
$scope.list2 = utils.addListIfNoExists($scope.list2, newListToAppend);
if ($scope.list1.length === 0) $scope.checked1 = false;
}
};
$scope.moveItemToLeftList = function() {
var newListToAppend = $scope.list2.filter(function(el) {
if (el.active === true) {
el.active = false;
return el;
}
});
if (newListToAppend.length > 0) {
$scope.list2 = $scope.list2.filter(function(el) {
return utils.getIndexesFromList(newListToAppend).indexOf(parseInt(el.id)) === -1;
});
$scope.list1 = utils.addListIfNoExists($scope.list1, newListToAppend);
if ($scope.list2.length === 0) $scope.checked2 = false;
}
};
}
return {
restrict: "E",
scope: true,
controller: _controller,
templateUrl: "dualList.html"
};
});
dualList.html
<div class="container">
<br />
<div class="row">
<div class="dual-list list-left col-md-5">
<div class="well text-right">
<div class="row">
<div class="col-md-3">
<div class="checkbox">
<label>
<input type="checkbox"
ng-model="checked1"
ng-click="selectAllItem(list1, checked1)">
Todo {{getAllSelectedItems(list1).length}}/{{list1.length}}
</label>
</div>
</div>
<div class="col-md-9">
<div class="input-group">
<span class="input-group-addon glyphicon glyphicon-search"></span>
<input type="text"
name="SearchDualList"
ng-model="search1"
class="form-control"
placeholder="search" />
</div>
</div>
</div>
<ul class="list-group">
<a class="list-group-item"
href=""
data-id="{{item.id}}"
ng-click="item.active = !item.active"
ng-class="{active: item.active}"
ng-repeat="item in list1|filter: search1">{{item.title}}</a>
</ul>
<p ng-if="(list1 | filter:search1).length == 0">Sin Datos</p>
</div>
</div>
<div class="list-arrows col-md-1 text-center">
<button ng-click="moveItemToLeftList()"
class="btn btn-default btn-sm move-left">
<span class="glyphicon glyphicon-chevron-left"></span>
</button>
<button ng-click="moveItemToRightList()"
class="btn btn-default btn-sm move-right">
<span class="glyphicon glyphicon-chevron-right"></span>
</button>
</div>
<div class="dual-list list-right col-md-5">
<div class="well">
<div class="row">
<div class="col-md-3">
<div class="checkbox">
<label>
<input type="checkbox"
ng-model="checked2"
ng-click="selectAllItem(list2, checked2)">
Todo {{getAllSelectedItems(list2).length}}/{{list2.length}}
</label>
</div>
</div>
<div class="col-md-9">
<div class="input-group">
<span class="input-group-addon glyphicon glyphicon-search"></span>
<input type="text"
name="SearchDualList"
ng-model="search2"
class="form-control"
placeholder="search" />
</div>
</div>
</div>
<ul class="list-group">
<a class="list-group-item"
href=""
data-id="{{item.id}}"
ng-click="item.active = !item.active"
ng-class="{active: item.active}"
ng-repeat="item in list2|filter: search2">{{item.title}}</a>
</ul>
<p ng-if="(list2 | filter:search2).length == 0">Sin Datos</p>
</div>
</div>
</div>
</div>
index.html
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script data-require="jquery#*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://code.angularjs.org/1.3.0/angular.js"></script>
<link data-require="bootstrap#*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link data-require="bootstrap#*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" />
<link data-require="font-awesome#*" data-semver="4.3.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<dual-list data-list1="list1" data-list2="list2"></dual-list>
</body>
</html>
style.css
.dual-list .list-group {
margin-top: 8px;
}
.list-arrows {
padding-top: 100px;
}
.list-arrows button {
margin-bottom: 20px;
}
.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
border-color: white;
}
.input-group-addon {
top: 0;
}

I think this link will help you.

Try this npm for angular 2/4 just you need to install with npm
https://www.npmjs.com/package/ng2-dual-list-box

Ionic Modal: clear all fields on click/cancel

Ive tried to use this with the current view scope and also by adding its own controller. No success in clearing all fields on cancel button click. All I need is to clear the fields.
Here is my in my controller modal :
var myApp = angular.module('starter.controllers');
function TalkSearchPageCtrl($scope, TalkSearch, $ionicModal) {
var nextPageNum = 1;
$scope.noMoreItemsAvailable = false;
var nextPageNum = 1;
$scope.loadMore = function() {
TalkSearch.getList(nextPageNum, {
}, $scope.idsToExclude, $scope.backResult).success(function(items) {
if (typeof(items.idsToExclude) !== undefined) {
$scope.idsToExclude = items.idsToExclude;
$scope.backResult = true;
} else {
$scope.idsToExclude = undefined;
$scope.backResult = undefined;
}
// error check when it's not loading
if (items.talks.length != 0) {
i = 0;
while (i != items.talks.length - 1) {
$scope.talks.push(items.talks[i]);
i++;
}
nextPageNum++;
} else {
$scope.noMoreItemsAvailable = true;
}
$scope.$broadcast('scroll.infiniteScrollComplete');
});
};
$scope.talks = [];
$scope.categories = [
];
$scope.checkedCategories = [];
$scope.toggleCheck = function(category) {
if ($scope.checkedCategories.indexOf(category) === -1) {
$scope.checkedCategories.push(category);
} else {
$scope.checkedCategories.splice($scope.checkedCategories.indexOf(category), 1);
}
};
$scope.getValues = function(filter) {
console.log(filter);
if (filter.length || filter !== undefined) {
$scope.userFilter = {};
$scope.userFilter.categories = [];
$scope.userFilter.filters = {};
$scope.userFilter.filters = angular.copy(filter);
var categories = $scope.checkedCategories;
$scope.userFilter.categories = categories;
getFiltersService.filter = angular.copy(filter);
console.log($scope.userFilter);
// console.log(getFiltersService.filter);
}
};
$scope.reset = function() {
console.log($scope.userFilter);
// $scope.modal.hide();
// $scope.userFilter.filters = null;
// $scope.userFilter.categories = null;
// $scope.userFilter = {};
console.log($scope.userFilter);
};
$ionicModal.fromTemplateUrl('my-modal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
});
}
myApp.controller('TalkSearchPageCtrl', ['$scope', 'TalkSearch', '$ionicModal', TalkSearchPageCtrl]);
$ionicModal.fromTemplateUrl('my-modal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
});
Here is my html script template :
<script id="my-modal.html" type="text/ng-template">
<ion-modal-view>
<ion-header-bar class="bar bar-header schoolinkscolor headerSection" ng-controller="TalkFilterPageCtrl">
<div class="row padding0">
<div class="col">
<div class="button button-white closeModal" side="right" ng-click="reset(talkfilter);hideButton=false;showDetails=false;"><span>Cancel</span></div>
</div>
<div class="col">
<div class="light headerTitle"><span class="light">Schoo</span><span class="color-black">Links</span></div>
</div>
<div class="col">
<div class="button button-white searchButton" side="left"><span>Search</span></div>
</div>
</div>
</ion-header-bar>
<ion-content class="has-header">
<div class="talkFilterContainer">
<section>
<div class="col padding0">
<div class="list list-inset">
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" placeholder="Search" ng-model="talkfilter.searchTalk" ng-change="getValues(talkfilter)" ng-model-options="{ debounce: 1000 }">
</label>
</div>
</div>
</section>
<div class="row padding clearboth"></div>
<section>
<div class="list padding">
<label class="item item-input item-select">
<div class="input-label">
Language:
</div>
<select ng-options="author for author in ['Mandarin','Spanish','Portuguese']" ng-model="talkfilter.selectLanguage" ng-init="author = 'Select Preferred Language'" ng-change="getValues(talkfilter)">
<option value="">Select Preferred Language</option>
</select>
</label>
</div>
</section>
<div class="row padding clearboth"></div>
<section>
<div class="list padding">
<label class="item item-input item-select">
<div class="input-label">
Author Type:
</div>
<select ng-options="author for author in ['Consultant','School','Student']" ng-model="talkfilter.authorType" ng-init="author = 'Select By Author Type'" ng-change="getValues(talkfilter)">
<option value="">Select By Author Type</option>
</select>
</label>
</div>
</section>
<div class="row padding clearboth"></div>
<section class="padding">
<ion-list>
<ion-item ng-repeat="category in categories track by $index" ng-class="{ 'hidden': ! showDetails && $index > 2}">
<ion-checkbox value="{{category}}" ng-model="$index" ng-click="toggleCheck(category); getValues(talkfilter)">{{category}}</ion-checkbox>
</ion-item>
</ion-list>
<div class="row">
<button class="button button-full button-clear" ng-click="showDetails = ! showDetails;hideButton=true" ng-show="!hideButton">See All Categories</button>
</div>
</section>
</div>
</ion-content>
</ion-modal-view>
Here is my reset function:
var Talk = this;
Talk.reset = function(filter) {
console.log(filter);
filter = null;
};
Also tried with $scope :
$scope.reset = function(filter) {
console.log(filter);
filter = null;
};
***Update:
$scope.reset = function(filter) {
$scope.userFilter = null; //does not work. none of these variations work.
$scope.userFilter = '';
};
Both of these methods return undefined. But if i put the button in the body it clears the fields. I need the button in the header.
Also tried inlining the reset with:
<button ng-click="talkfilter=null"></button>

The problem is that you are not passing anything in the filter function with the ng-click, because your $scope.userfilter is not defined throughout the controller.
Adding $scope.userFilter = {} like you have done inside of getValues, outside of that function should give you the desired result if you do your reset function like so....
function TalkSearchPageCtrl($scope, TalkSearch, $ionicModal) {
$scope.userFilter = {};
...
$scope.reset = function(filter) {
console.log(filter); \\Make sure this is the object
$scope.userFilter = null; \\Set it to null or {}
}`

Grab $(this) element's html and insert into $scope.variable

I am trying to grab the buttons html with .html() and insert into $scope.player. The button is calling the choosePlayer() function with ng-click but it is not working.
Here's the codepen link: http://codepen.io/theMugician/pen/ojJrRp
HTML
<body ng-app="ticTacToe" ng-controller="MainCtrl">
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<h1>TIC TAC TOE</h1>
</div>
</div>
</div>
<div id="wrapper" class="container text-center">
<div class="row">
<div ng-click="move(cell)" ng-repeat="cell in cells" class="col-xs-4 square text-center">
{{cell.value}}
</div>
</div>
</div>
<div class="container">
<div class="row text-center">
<h1>CHOOSE A SHAPE</h1>
<button ng-click="choosePlayer()" class="btn btn-red" id="choose-cross">✖</button>
<button ng-click="choosePlayer()" class="btn btn-green" id="choose-circle">◯</button>
</div>
</div>
</body>
JAVASCRIPT
var app = angular.module("ticTacToe", []);
app.controller("MainCtrl", function($scope){
var cell = $(".square");
$scope.player = "";
var cross = "×";
var circle = "◯";
$scope.choosePlayer = function(){
$scope.player = $(this).html();
}
$scope.cells = [ { value: '' }, { value: '' }, { value: '' },
{ value: '' }, { value: '' }, { value: '' } ,
{ value: '' }, { value: '' }, { value: '' }
];
$scope.move = function(cell){
cell.value = $scope.player;
};
});

You could pass the $event object in the ng-click() directive:
<button ng-click="choosePlayer($event)" class="btn btn-red" id="choose-cross">✖</button>
<button ng-click="choosePlayer($event)" class="btn btn-green" id="choose-circle">◯</button>
And then access event.currentTarget to get the element in your controller:
Updated Example
Without jQuery:
$scope.choosePlayer = function(e) {
$scope.player = e.currentTarget.innerText;
}
With jQuery:
$scope.choosePlayer = function(e) {
$scope.player = $(e.currentTarget).text();
}

Can't click the upvote on my angular-rails Reddit clone

I built a Reddit clone in Angular and Rails following this guide. I've been playing around with the CSS to get the upvote and downvote arrows in the right spot. I guess overriding the Bootstrap wasn't a good idea because I can't seem to get my ng-click to fire when I click the arrow anymore (it worked fine before, didn't change the js at all). Here's the relevant bits:
HTML:
<div class="row">
<div class="col-md-1 small-right-gutters small-col">
<div class="row">
<div class="col-md-1 small-right-gutters">
<div class="glyphicon glyphicon-arrow-up" ng-click="addUpvote(post)"></div>
<div class="glyphicon glyphicon-arrow-down"></div>
</div>
<div class="col-md-1 vert-center">
{{post.upvotes}}
</div>
</div>
</div>
<div class="col-md-9 big-col vert-center">
<a ng-show="post.link" href="{{post.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
</div>
<div class="col-md-2 text-right">
<div>
<small>{{ post.comments.length }} comment<span ng-hide="post.comments.length==1">s</span></small>
</div>
<div>
<small>posted by <a ng-href="#/users/{{post.user.username}}">{{post.user.username}}</a></small>
</div>
</div>
</div>
CSS:
.small-right-gutters {
padding-right: 2px;
}
.small-col {
width: 40px;
}
.big-col {
width: 925px;
font-size:20px;
margin-left: 10px;
}
.vert-center {
height: 40px;
line-height: 40px;
}
Angular controller:
$scope.addUpvote = function (post) {
postFactory.upvotePost(post);
};
$scope.addDownvote = function (post) {
postFactory.downvotePost(post);
};
Angular factory:
upvotePost: function(post) {
return $http.put('/posts/' + post.id + '/upvote.json').success(function (data) {
post.upvotes += 1;
});
},
downvotePost: function(post) {
return $http.put('/posts/' + post.id + '/downvote.json').success(function (data) {
post.upvotes -= 1;
});
},
Any ideas why this is happening?

If you add z-index: 1; on your .glyphicon it works!