Cómo establecer el atributo id de un elemento HTML dinámicamente con angularjs (1.x)?

Esto me funcionó bastante bien:

<div id="{{ 'object-' + $index }}"></div>

Una forma más elegante que encontré para lograr este comportamiento es simplemente:

<div id="{{ 'object-' + myScopeObject.index }}"></div>

Para mi implementación quería que cada elemento de entrada en un ng-repeat tuviera un id único con el que asociar la etiqueta. Así que para una matriz de objetos contenidos dentro de myScopeObjects uno podría hacer esto:

<div ng-repeat="object in myScopeObject">
    <input id="{{object.name + 'Checkbox'}}" type="checkbox">
    <label for="{{object.name + 'Checkbox'}}">{{object.name}}</label>
</div>

Ser capaz de generar identificadores únicos sobre la marcha puede ser bastante útil cuando se agrega dinámicamente contenido como este.

En caso de que haya llegado a esta pregunta, pero relacionado con la nueva Versión angular >= 2.0.

<div [id]="element.id"></div>

Usted podría simplemente hacer lo siguiente

En su js

$scope.id = 0;

En su plantilla

<div id="number-{{$scope.id}}"></div>

Que rendirá

<div id="number-0"></div>

No es necesario concatenar dentro de llaves dobles.

Si usa esta sintaxis:

<div ng-attr-id="{{ 'object-' + myScopeObject.index }}"></div>

Angular renderizará algo como:

 <div ng-id="object-1"></div>

Sin embargo esta sintaxis:

<div id="{{ 'object-' + $index }}"></div>

Generará algo como:

<div id="object-1"></div>