Angular Click in List

by gedave

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<div ng-app>
    <div id="normalDiv">
        <dl>
            <dd>list Item 1</dd>
            <dd>list Item 2</dd>
            <dd>list Item 3</dd>
        </dl>
    </div>
    <div id="testDiv" ng-controller="FooController">
        <dl ng-repeat="item in items | orderBy:'num':true">
            <dd ng-click="getItem(item,$event)">{{item.date}} :: {{item.desc}}</dd>
        </dl>
    </div>
    <hr>
    <div id="thisResult">{{thisResult}}</div>{{2+2}}</div>

CSS

.highlight {
    font-weight: bolder;
}

JavaScript

function FooController($scope) {
    $("#normalDiv dd").click(function () {
        $(this).toggleClass("highlight");
        $("#thisResult").html(this);
        alert(this);
        console.log(this);
    });

    $scope.getItem = function (item,event) {
        $(this).toggleClass("highlight");
        $scope.thisResult = item.date;
        alert(item.date);
        console.log(item.date);
        console.log(event);
    };
    
    
    $scope.items = [{
        desc: 'a',
        date: 'Test Item 1'
    }, {
        desc: 'b',
        date: 'Test Item 2'
    }, {
        desc: 'c',
        date: 'Test Item 3'
    }];
}