AngularJS Chained Selects

HTML

<script src="https://raw.github.com/briancray/tooltipsy/master/tooltipsy.source.js"></script>
<div class="tipview" ng:app ng:controller="tipme">
         items:
        <div ng:repeat="item in model">{{ item.name }}</div>
    <a ng:click="actionA()" id="showTip">show tip</a>


</div>
<div class="hide">
    <div class="tipContent">
        <a ng:click="actionB()">click to alert</a>
        items:
        <div ng:repeat="item in model">{{ item.name }}</div>
    </div>
</div>

CSS

</style>
<script src="http://docs-next.angularjs.org/angular-0.10.6.min.js"></script>
<style>
.hide{ display: none;} 
.tooltipsy {
padding: 10px;
color: white;
background-color: #aaa;
-moz-box-shadow: inset 0 0 10px #000;
-webkit-box-shadow: inset 0 0 10px #000;
box-shadow: inset 0 0 10px #000;
text-shadow: 0 0 3px black;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
position: relative;
}

JavaScript

function tipme($compile) {
        this.model = { item1: {name: "item 1"}, item2: {name: "item 2"}, item3: {name: "item 3"} };
        this.actionA = function() {
            this.$showTip.tooltipsy({
                content: function () { return $('.tipContent'); },
                hideEvent: '',
                showEvent: '',
                offset: [1,1]            
            });
        $compile(this.$showTip.data('tooltipsy').$tipsy[0])(this);
            this.$showTip.data('tooltipsy').show();
        };
        this.actionB = function() {
            this.model = { item1: {name: "item 1"}, item2: {name: "item 2"}};
            window.alert('alerted');
            this.$apply();
        };
        
        this.$showTip = $('#showTip');
        

    }