Антон

У вас внутри

function(){
          console.log('Onclick working!'); // working!
          this.ul.style.color = 'red'; //TypeError: this.ul is undefined
        };

this будет на кнопку ссылаться, насколько я понимаю. проверьте через console.log что у вас внутри функции в this.
Если я прав, то обычно делают что-то типа

var that = this;
this.btn.onclick = function(){
          console.log('Onclick working!'); // working!
          that.ul.style.color = 'red'; //TypeError: this.ul is undefined
        };

$('#'+kuda+',#id2').load(otkuda +'-'+number+' > *');

где id2 - это id второго блока, куда надо загрузить контент

Как в файбаге - не скажу, а вот в средствах разработчика в Хроме правой кнопкой на элементе - Break on .. attributes modification.

Кликаете на кнопку значка, у вас срабатывает этот брейкойнт, в call stack смотрите откуда вызов.

Можно во вкладке network навести курсор на текст в колонке initiator и там будет стек вызовов.
Можно во вкладке sources в правойо колонке поставить галочку на XHR breakpoints

Есть еще такой вариант:
{{ '{{custom()}}' }}
т.е. по сути вывести твигом строку с фигурными скобками.

Моё ИМХО:
1) Директива калькулятор вообще странная, но оставим её пока.
2) Делайте отдельную директиву, которая будет вешать спинер на элемент аналогично:

angular.module('imr.ui.date', [])
	.directive('datepicker', function () {
		return {
			restrict: 'A',
			require : 'ngModel',
			link    : function (scope, element, attrs, ngModelCtrl) {
				var opts = {
					dateFormat: 'mm/dd/yy',
					changeYear: true,
					onSelect  : function (date) {
						ngModelCtrl.$setViewValue(date);
						scope.$apply();
					}
				}
if (!(attrs.hasOwnProperty('ngReadonly') && scope.$eval(attrs.ngReadonly))) {
					$(function () {
//тут вешайте ваш спиннер
						element.datepicker(opts);
					});
				}
			}
		}
	});
;

<input type="number" id="spinner" ng-model="SecondVal" spinner><br>

habrahabr.ru/qa/43846/ — думаю вы про этот вопрос.