I don't use Angular. So, I don't know if your code above will create a bunch of divs all with the same ID of "device.id", or if it will generate unique IDs from your array of vm.deviceNames. ng-repeat is a template directive:
I believe, though, that it will create a bunch of divs all with the same ID. And that's invalid HTML. IF that's what is created, then the FIRST one should be draggable.
But you don't need the IDs. Use a CSS class. CSS classes don't have the restriction of having to make them unique in a page. And you already have a convenient CSS class.
$('.device-list-item').draggable();
---
You PROBABLY wanted something like:
- <div id="{{device.id}}" class="device-list-item exlhoist-dashboard-col" ng-repeat="device in vm.deviceNames">
... but I don't use Angular. (Because, apparently, using Angular is like hitting your head against a wall, repeatedly. At least that is what I have heard from a trusted colleague. I do not like hitting my head against a wall, repeatedly...)
But of course you still need to use a CSS class for .draggable() as then then IDs will all be different and you won't know in advance what they are.
I question whether there is any actual need for IDs here. If you have no use for them, don't include them!
In general, when you are tempted to add some unique ID to each item in a list, you probably DO NOT NEED IDs, and relying on them will only over-complicate your code.
---
I notice that you loaded jQuery twice. You should only load it once. Pick ONE version.