Spunky

That's the ticket. I think my original intention was to clear the count everytime...but now I see how impossible/hard that would be. Push will work, but I have never done a "push" for this type of array before, how would that be set up? (since it is adding an entry for "name" and for "link".

You're right, ended up being in a parent-element not visible in my code, but visible in inspect element: a.accordion-toggle:hover{ text-decoration: none; } Did the trick finally.

var holdBuilding = $scope.m1Special.Buildings; var c = 0; $scope.m2Info = {}; $scope.m3Info = {}; $scope.m4Info = {}; $scope.m5Info = {}; $scope.m6Info = {};$scope.create2ndMap = function(){ $scope.m2Info[c]={ name:holdBuilding[c].name, link:holdBuilding[c].link }; c++;}$scope.create3rdMap = function(){ $scope.m3Info[c]={ name:holdBuilding[c].name, link:holdBuilding[c].link }; c++;}$scope.create4thMap = function(){ $scope.m4Info[c]={ name:holdBuilding[c].name, link:holdBuilding[c].link }; c++;}$scope.create5thMap = function(){ $scope.m5Info[c]={ name:holdBuilding[c].name, link:holdBuilding[c].link }; c++;}$scope.create6thMap = function(){ $scope.m6Info[c]={ name:holdBuilding[c].name, link:holdBuilding[c].link }; c++;}angular.forEach(holdBuilding,function(){ if($scope.m1Special.Buildings[c].loc=="Northern"){ $scope.create2ndMap(); } else if($scope.m1Special.Buildings[c].loc=="Central"){ $scope.create3rdMap(); } else if($scope.m1Special.Buildings[c].loc=="Western"){ $scope.create4thMap(); } else if($scope.m1Special.Buildings[c].loc=="Eastern"){ $scope.create5thMap(); } else if($scope.m1Special.Buildings[c].loc=="Southern"){ $scope.create6thMap(); };}); alert($scope.m3Info[0].name); Anyone able to tell me why the alert on the bottom of the code breaks the AngularJS (shows interpolations instead of values) with an error of: "Error: $scope.m3Info[0] is undefined It does this for any alert of the above "objects" I created except for $scope.m2Info[0].name For example, I can alert any item contained in m2Info (0,1,2) but none of the ones in m3Info, m4Info, etc... I can, however, put an alert in the function like so: alert($scope.m6Info[c].name); And that will work, but not with a number. For m2Info it works with both a number and c. Clearly the objects aren't being created quite the way I am expecting. Only m2Info is being created, whereas the others are lost after the function ends? I'm doing them exactly the same though, so not sure what is going awry..

Perhaps it is added somewhere, perhaps in the Bootstrap external links as a default for accordions. I can't find where it is applied when I inspect element. I just don't understand why I can change the style of it but not the style on hover.

The page would not load for me. But based on the "wobble" description you should look into CSS3 Animation and JavaScript.

So this isn't so much how to improve w3schools.com (tutorials section) but more of the forum section. There has gotten to be sooo many web technologies that utilize JavaScript/CSS. Maybe there should be separate boards to accomodate that? For example one for AngularJS, one for Bootstrap. I've noticed that the couple of times that I've had AngularJS issues, while I think I have gotten them ultimately solved, its always a moderator that replies whom states they don't have much experience with it but they do the best they can because well, if no one else is he should at least try I guess.. I know that everyone is volunteer here and all, but I just think that instead of our AngularJS/Bootstrap questions being tangled in with and hidden by all the other JavaScript/JQuery questions, they could have their own home where they could sit unanswered longer without the fear of being buried. JavaScript and JQuery are at least somewhat similar whereas AngularJS uses JavaScript in a whole new light. Maybe it would even encourage more people to follow the board containing AngularJS issues if that's what they enjoy solving without having to pick through the JavaScript specific ones? Personally since I have branched into using AngularJS and Bootstrap I hardly ever come on here. Instead I take my issues over to StackOverflow and get solutions and help in a breeze. Ofcourse, this would still be the case what with there not being as many knowledgable people in these somewhat newer technologies. But like I said, I'd be more inclined to at least post here first if my posts weren't so easily buried. I've been a long time user on these forums, even if I don't have a lot of posts to show for it. I absiolutely love w3schools.com tutorials and the people on this forum are very friendly.

OK this is probably going to be something really simple, like a brain ###### or a typo, but I cannot figure this out for the life of me.. so here it goes. First, here's my HTML: <accordion> <accordion-group ng-repeat="z in epLinks" is-open="z.accO" is-disabled="z.accEn"> <accordion-heading><span class="disabledLink accHead">{{z.name}}<span class="caret"></span></span></accordion-heading> content </accordion-group></accordion> Just take a look at the <span class="disabledLink..." part of that located in the accordion-heading. Here is my CSS now: .disabledLink{ color:#898989; cursor:default; } .disabledLink:hover{ text-decoration:none !important; } The style for .disabledLink are being applied just fine... why is the style for .disabledLink:hover not being applied?? I'd even added !important to it thinking something was overriding it.

Alright so this is probably mostly a debugging issue. I just cannot seem to pinpoint what is wrong with the following code: <div ng-repeat="z in m2ExtraLinks" class="m2Details"> <li data-toggle="modal" data-target="#{{z.id}}">{{z.name}}</li> <div class="modal fade m2Details" id="{{z.id}}" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>Body</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> Absolutely nothing happens. No errors when I click the list items. No errors otherwise. Nothing. Ofcourse, I've already tried my own debugging to figure out this problem. I've discovered that if I paste w3school's tutorial right where my current code is something happens: but it is still not a desired effect. The whole screen dims..like it is suppose to, but also the modal itself is darkened. I've also "inspect element" on the output of my HTML and it is all showing as expected..but still, nothing happens if I try to hand code it in instead of using Angular. This is my first time taking a crack at "modal", so I am sure I am doing something wrong. Anyone got any clue what that is? The expected result with my code is that for each list item that gets displayed from the ng-repeat, there will also be its own modal that pops up when the list item is clicked.

Unfortunately I tried both these and they didn't work. But I see where you are going with this. (I did make sure to change .xs-hidden to hidden-xs from your code) and in regards to the period for class within the value of the class attribute..that was a mistake on my part posting it in here. These all are pieced together using AngularJS which I was trying to clear up to just give the raw code, so no worries there. I do have a question in regards to your suggestions. Isn't the whole problem that something forced to be hidden can't fadeIn and thus won't fadeOut? I mean, I know we are targeting the hidden elements directly but the whole problem is theres still nothing to fade! Least that's the way it seems. Cuz the new code is working the same as my code: works when the maps are visible, doesn't do anything, no error, on "mobile". I may just have to target the "mobile" back buttons separately, they are, after all, essentially doing a different task. Thanks again for your help.

You have a nofun habit of reiterating the conclusion that I state in my post, happened with my last post on here. I know that it is going to run that function after the animation finishes. I came up with that conclusion already and now I am having a hard time figuring out how to resolve it, hoping for some help.

Ok so I have the following JQuery: $('.bkbtnHome').click(function(e) { $('.HomeRegion').not($(':hidden')).fadeOut('slow', function() { $(".m2Details,.m3Details,.m4Details,.m5Details,.m6Details,.bkbtn").css("display", "none"); $(".m1Details").css("display", "block"); $(".noQuery").css("display","none"); $("#buildingHeader").html("Group Health Cooperative - Trammell"); $('div#m1Map').fadeIn('slow'); });}); Works beautifully but I recently noticed that a 2nd element with the class .bkbtnHome isn't working the same as the 1st. Here is the 1st: <li class="bkbtn .bkbtnHome"><a href="#"><img src="img/icon_arrowl.png" height="15px" width="15px">Return</a></li> And 2nd: <span class="bkbtn hidden-sm hidden-md hidden-lg .bkbtnHome"><a href="#"><img src="img/icon_arrowl.png" height="15px" width="15px">Return</a></span> The difference is that the 1st is always visible and the 2nd is only visible on xs device/screen. On an xs device, the .HomeRegion elements are not visible, they have .hidden-xs applied to them. Sooo, what happens is that since the JQuery is looking for hidden elements and fadingOut the one that isn't, it isn't finding anything and is stopping, rather than continuing the code. Before I started using the .not hidden stuff, the code would run fine on xs device/screen, and it was nice that I didn't have to treat both back buttons different. But I can't individually .fadeOut each element needed without causing another problem that I had fixed by using this method. Is there a way to fix this with the current code? Or will I have to add code that treats the 2nd back button differently than it treats the 1st?

I have a piece of JQuery: $('#bkbtnHome').click(function(e){ $('div#m2Map,div#m3Map,div#m4Map,div#m5Map,div#m6Map,div#m7Map,div#m8Map').fadeOut('slow', function(){ $(".m1Details,#AlaskaMini").css("display","block"); $(".m2Details,.m3Details,.m4Details,.m5Details,.m6Details,.m7Details,.m8Details,.noQuery,li.bkbtn").css("display","none"); $('div#m1Map').fadeIn('slow'); });}); Trouble is, I have recently noticed that when I click #bkbtnHome, the div that is currently visible gets pushed down as it is fading out and the div that fades in appears above it. It's just ugly because it pushes it down for a second which actually causes my page to need a scroll bar for a second before it too disappears. Thing is, I know this only occurs because there are multiple divs "fading out" even though the rest of them are not visible. For example: div#m2Map is visible. I click #bkbtnHome. div#m2Map fades out, the other stuff changes their display, div#m1Map fades in. However, #bkbtnHome can also be clicked when div#m3Map is visible. When that too is clicked, it needs to fade out and have the same stuff change its display. Hence why I put it all together. When it is just a single item fading out, this problem doesn't occur. I am pretty sure it is because something that is already invisible is being told to fade out. My question is, what might be a better way to write this to accomplish the same task? I tried adding an if statement like this: $('#bkbtnHome').click(function(e){ if($('div#m2Map').css("display","block")){ $('div#m2Map').fadeOut('slow',function(){ $(".m1Details,#AlaskaMini").css("display","block"); $(".m2Details,.m3Details,.m4Details,.m5Details,.m6Details,.m7Details,.m8Details,.noQuery,li.bkbtn").css("display","none"); $('div#m1Map').fadeIn('slow'); }); };}); And it does work, but this would require me to write many if statements (or one with many else). Is there another approach I could take to fix this little glitch that would keep it simple/short?

Got it

FYI I fixed that above in my code, I am changing the code in here, so no it is not causing the errors to occur in my own code..that doesn't even make any sense otherwise new errors would occur than the one I would originally need to post about. It was just 2 things I messed up so calm down they're called human errors.

If that's all you found then I don't know what the problem is. I changed all the element/property names because this is for work and trying to keep it simple but instead I caused other errors to show which aren't in my code! My fade in and out work fine and the name and id are equal. I just failed to keep it consistent in the code I pasted here.

Ok, there has got to be something so minute that is causing an issue I am having with running two image maps on the same HTML page, which I know is possible. I am using Google Static Maps for my images and they are getting their data using AngularJS from an Object, so for simplicity, I will be providing an actual image. <div id="mapWrap" ng-controller="Ctrl"> <div id="BigMap" class="myStaticMap"> <img ng-src="https://maps.googleapis.com/maps/api/staticmap?" usemap="#map1"> <h4 class="mapTitle">Area</h4> </div> <div id="OffSite" class="myStaticMap"> <img src="https://maps.googleapis.com/maps/api/staticmap?" usemap="#map2"> <h4 class="mapTitle">Site</h4> </div> <map name="map1" id="map1"> <area ng-repeat="x in allSites" alt="{{x.name}}" title="{{x.name}}" ng-click="allClick(x.name,x.address,x.link)" shape="poly" coords="{{x.htmlcoords}}" /> <area alt="{{Object[0].name1 + Object[0].name2}}" title="{{Object[0].title}}" ng-click="thisClick(Object[0].name1,Object[0].name2,Object[0].address1,Object[0].address2,Object[0].link1,Object[0].link2)" shape="poly" coords="{{Object[0].htmlcoords}}" /> <area alt="{{Object2[0].name1 + Object2[0].name2 + Object2[0].name3}}" title="{{Object2[0].title}}" ng-click="thisClick(St127th[0].name1,Object2[0].name2,St127th[0].name3,Object2[0].address1,Object2[0].address2,Object2[0].address3,Object2[0].link1,Object2[0].link2,Object2[0].link3)" shape="poly" coords="{{Object2[0].htmlcoords}}" /> <area alt="{{Object3[0].name}}" title="{{Object3[0].name}}" href="#" shape="poly" coords="{{Object3[0].htmlcoords}}" id="SpecialMarker" /> </map> <map name="map2" id="map2"> <area ng-repeat="y in Group1" alt="{{y.name}}" title="{{y.name}}" ng-click="allClick(y.name,y.address,y.link)" shape="poly" coords="{{y.htmlcoords}}" /> <area ng-repeat="z in Group2" alt="{{z.name}}" title="{{z.name}}" ng-click="allClick(z.name,z.address,z.link)" shape="poly" coords="{{z.htmlcoords}}" /> </map></div> So, everything in "map2" is what is not working. What I have is 2 maps with markers. map2 actually starts out hidden: div#map2{ display:none;} Then, when a certain marker on map1 is clicked, map1 fades out and map2 fades in: $(document).ready(function(){$('#SpecialMarker').click(function(e){ $('div#BigMap').fadeOut('slow', function(){ $('div#OffSite').fadeIn('slow'); }); $("#tagWrap").collapse('hide');}); SpecialMarker you will notice is the 3rd <area> tag located on map1. Ok, so, all of that works BEAUTIFULLY. The clicking, the switching, blah blah. The problem is, when map2 is on the screen, nothing happens when the markers appear. They appear all right. And the <area> tags for map2 are even set right as far as their alt="", title="", and coords="" go. They are filled up as expected via the Object build for them, which for the record incase it is important, I use the object to fill in the map coordinates to create the Google Static Map. What doesn't go as planned is the ng-click="(x.name,x.address,x.link)". Only for map2. map1, although exactly the same (seemingly), works fine. I am used to AngularJS giving me trouble, but the weird part about it all is that the following CSS doesn't get applied to the <area> tag for map2: area:hover{ cursor: pointer;} Now, that could be simply because the coordinates aren't being placed correctly ofcourse since the <area> tag seems to be malfunctioning. So, to sum up a bit. The <area> tags for map2 are appearing in the HTML correctly, the amount they're supposed to with ng-repeat, etc. And their properties are being filled fine too EXCEPT for ng-click. As well as the CSS not working, which possibly is because the coordinates are malfunctioning BUT the coordinates appear just fine in the HTML when I inspect element in the browser. And no, I am not getting any errors. I hope I explained my scenario well enough. Any suggestions?

Blast, you're right. I should've known that. I was even on the w3schools website looking at it. Sheesh. Thanks.

Can anyone tell me why the following code breaks when I use the literal formatting for creating arrays and objects? var map;var bounds = new google.maps.LatLngBounds();var infowindow;var i;(function () { google.maps.Map.prototype.markers = new Array(); google.maps.Map.prototype.addMarker = function(marker) { this.markers[this.markers.length] = marker; }; google.maps.Map.prototype.getMarkers = function() { return this.markers }; google.maps.Map.prototype.clearMarkers = function() { if(infowindow) { infowindow.close(); } for(var i=0; i<this.markers.length; i++){ this.markers[i].set_map(null); } };})();function initialize() { firstB = new google.maps.LatLng(123,-123); secondB = new google.maps.LatLng(123,-123); bounds.extend(firstB); bounds.extend(secondB); var myCoord = new google.maps.LatLng(123,-88.123); var mapOptions = { zoom:14, center:myCoord, disableDefaultUI:true } map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); var styles=[ { featureType:"road", elementType:"labels", stylers:[ {visibility:"off"} ] } ]; map.setOptions({styles: styles});var pinIcon = new google.maps.MarkerImage( 'http://maps.google.com/mapfiles/ms/icons/green-dot.png', null, /* size is determined at runtime */ null, /* origin is 0,0 */ null, /* anchor is bottom center of the scaled image */ new google.maps.Size(52, 52)); var a = new Array(); var t = new Object(); t.name = "name" t.lat = 41.7590721 t.lng = -234 t.address = "234" a[0] = t; var t = new Object(); t.name = "name" t.lat = 123 t.lng = -123 t.address = "123" a[1] = t; for (var i = 0; i < a.length; i++) { var latlng = new google.maps.LatLng(a[i].lat,a[i].lng); map.addMarker(createMarker(a[i].name,latlng)); };}; function createMarker(name, latlng) { var marker = new google.maps.Marker({position: latlng, map: map}); google.maps.event.addListener(marker, "click", function() { if (infowindow) infowindow.close(); infowindow = new google.maps.InfoWindow({content: name}); infowindow.open(map, marker); }); return marker; };google.maps.event.addDomListener(window, 'load', initialize);google.maps.event.addDomListener(window, "resize", function() { google.maps.event.trigger(map, "resize"); map.fitBounds(bounds);}); For example this: var a = new Array(); var t = new Object(); t.name = "name" t.lat = 41.7590721 t.lng = -234 t.address = "234" a[0] = t; var t = new Object(); t.name = "name" t.lat = 123 t.lng = -123 t.address = "123" a[1] = t; Turns into this: var a = []; var t = { name = "name", t.lat = 41.7590721, t.lng = -234, t.address = "234"}; a[0] = t; var t = { name = "name", lat = 123, lng = -123, address = "123", a[1] = t;};

Funny enough. I recently signed up for them to post questions related to code I am using for my new job. Decided to give it a shot because my coworker uses it and I like others have always found answers to a lot of my problems when I Google for solutions. So far I've experience friendly people. I always stress that I've researched like crazy. Because I have. One very positive thing I have noticed so far is that since it is a huge community, I get responses very fast! But, I don't have a past with them to compare my experience with!

Is there somewhere that I am missing that shows how to make a functional tablist in Bootstrap on w3schools.com? For example, I found: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_comp_nav-tabs&stacked=h But nothing anywhere about how to make this functional. I am having a rough time finding working code elsewhere. I have found a couple of things that work in their examples, but when I apply it to mine, it doesn't work. http://www.tutorialscollection.com/bootstrap-tabs-how-to-use-bootstrap-tab-plugin-with-examples/ http://jsfiddle.net/KyleMit/2VmmW/ Here is the code I have thus far: $(document).ready(function(){ $("#tabex a").click(function(e){ e.preventDefault(); $(this).tab('show'); });}); <ul class="nav nav-tabs" id="tabex" role="tablist"> <li class="active"><a href="#1st" role="tab" data-toggle="tab">1st</a></li> <li><a href="#2nd" role="tab" data-toggle="role">2nd</a></li></ul> <div class="tab-content"> <div class="tab-pane fade in active" id="pizza"> 1st content </div> <div class="tab-pane fade" id="pizzas"> 2nd content </div></div>

<div id="cost_total">Your total:<span id="cust_total" ng-model="total">{{(size*1 || 0) + (sausage*1 || 0) + (pepperoni*1 || 0) + (greenPepper*1 || 0) + (onion*1 || 0) | currency}}</span></div> <p>Size:</p> <div class="radio"> <label><input type="radio" ng-model="size" ng-click="enable_toppings()" name="size" value="3.95">$3.95</label> <label><input type="radio" ng-model="size" ng-click="enable_toppings()" name="size" value="5.95">$5.95</label> <label><input type="radio" ng-model="size" ng-click="enable_toppings()" name="size" value="7.95">$7.95</label></div> <div id="toppings_wrap"> <p>Toppings (25 cents each):</p> <div class="checkbox-inline"> <label><input type="checkbox" ng-model="sausage" ng-true-value=".25" ng-false-value="0">Sausage</label> </div> <div class="checkbox-inline"> <label><input type="checkbox" ng-model="pepperoni" ng-true-value=".25" ng-false-value="0">Pepperoni</label> </div> <div class="checkbox-inline"> <label><input type="checkbox" ng-model="greenPepper" ng-true-value=".25" ng-false-value="0">Green Pepper</label> </div> <div class="checkbox-inline"> <label><input type="checkbox" ng-model="onion" ng-true-value=".25" ng-false-value="0">Onion</label> </div> <button type="button" class="btn btn-md" id="next_pizza">Next Pizza <span class="glyphicon glyphicon-arrow-right"></span></button> </div> $scope.enable_toppings = function(){ document.getElementById("toppings_wrap").style.display = "block";}; That's the code. <span id="cust_total" ng-model="total">{{(size*1 || 0) + (sausage*1 || 0) + (pepperoni*1 || 0) + (greenPepper*1 || 0) + (onion*1 || 0) | currency}}</span> That, from the HTML code, is all the Angular that is needed to pull the values from the radio and checkboxes. No other JavaScript. This works. However, I want to use the ng-repeat directive to place in each input item both from the radio buttons and the checkboxes. I started out doing the radio buttons. That turns this: <div class="radio"> <label><input type="radio" ng-model="size" ng-click="enable_toppings()" name="size" value="3.95">$3.95</label> <label><input type="radio" ng-model="size" ng-click="enable_toppings()" name="size" value="5.95">$5.95</label> <label><input type="radio" ng-model="size" ng-click="enable_toppings()" name="size" value="7.95">$7.95</label></div> into this: <div class="radio" ng-repeat="x in pizza_sizes"> <label><input type="radio" ng-model="size" ng-click="enable_toppings()" name="size" value="{{x.value}}">{{x.tag}}</label> </div> I also had to add the array: $scope.pizza_sizes = [{tag:"Small for $3.95",value:3.95},{tag:"Medium for $5.95",value:5.95},{tag:"Large for $7.95",value:7.95}]; It displays the same. However, even though if I inspect the element on the page it shows the values are correct, they aren't being rendered correctly, it only picks up the first one (3.95). So to answer your question, yes, this code: <span id="cust_total" ng-model="total">{{(size*1 || 0) + (sausage*1 || 0) + (pepperoni*1 || 0) + (greenPepper*1 || 0) + (onion*1 || 0) | currency}}</span> Does it automatically. It grabs the value from radio buttons that are named "size" and inputting the value and proceeding to calculate the values on the rest of the line of code.

Alright so I am using the Google Maps API. I have a map that I need to be 100% height and width (defined in the CSS). The map does not show unless the container has a set width, could be pixels, percent etc, and height (this includes if there is no container, the body/html needs to be specified to 100% height and width, otherwise the map doesn't show). Problem arrives when I try to put the map inside the BOOTSTRAP defined class "row". I tried to make my own CSS for the class as well and tag on !important but this did not work. Naturally, "row" is designed to resize as needed. Anyone can suggest a workaround for this issue?

It updates immediately when the radio and/or checkbox is clicked. So essentially, as the user clicks on the radio buttons and checkboxes, the "total" updates, either increasing or decreasing as they are checked or unchecked.

I'm not sure I follow what you mean. For the record, the ng-click that I put in the radio button is for something totally separate. Right now what Angular is doing for me is automatically taking the value of the radio button when I click it and placing it where I specified to in the span. The code works when I have 3 radio buttons with their own specified value as such: <div> <label><input type="radio" ng-model="size" ng-click="enable_toppings()" name="size" value="3.95">3.95</label> <label><input type="radio" ng-model="size" ng-click="enable_toppings()" name="size" value="5.95">5.95</label> <label><input type="radio" ng-model="size" ng-click="enable_toppings()" name="size" value="7.95">7.95</label></div> If that makes more sense?

<div id="cost_total">Your total:<span id="cust_total" ng-model="total">{{(size*1 || 0) + (sausage*1 || 0) + (pepperoni*1 || 0) + (greenPepper*1 || 0) + (onion*1 || 0) | currency}}</span></div> <p>Size:</p> <div class="radio" ng-repeat="x in pizza_sizes"> <label><input type="radio" ng-model="size" ng-click="enable_toppings()" name="size" value="{{x.value}}">{{x.tag}}</label> </div> Above is the code that is not working. What it is suppose to do is get the price of the "pizza" as the user selects the radio buttons to select the size (and checkboxes for the "toppings" but those are not important here), and show it in the span after "Total". Here is the array that the ng-repeat is using: $scope.pizza_sizes = [{tag:"Small for $3.95",value:3.95},{tag:"Medium for $5.95",value:5.95},{tag:"Large for $7.95",value:7.95}]; The code works when I manually code the 3 inputs with their values, it is when I started using the ng-repeat that the "total" doesn't change when a radio button is selected. However, when I "inspect" the code, it shows each input as it is suppose to with the correct values. Is there a way I can do this using ng-repeat? Perhaps I am missing something? Thanks.