Можем ли мы динамически добавить «id» и «data-id» в один и тот же элемент?

Мне нужно знать, можем ли мы использовать "id" и "data-id" в одном элементе?

вот мой код: этот работает отлично!

<button class="btn btn-round btn-default" data-id="1" id="1" ng-click='getMyId($event)'>Requete1</button>
<button class="btn btn-round btn-default" data-id="2" id="2" ng-click='getMyId($event)'>Requete2</button>
<button class="btn btn-round btn-default" data-id="3" id="3" ng-click='getMyId($event)'>Requete3</button>

но когда я изменил его вот так:

<tr ng-repeat="pers in queries">
    <td>{{pers.id}}</td>
    <td>{{pers.name}}</td>
    <td>{{pers.description}}</td>
    <h1>XXXX</h1>
    <td>
        <div >
            <button class="btn btn-round btn-default" data-id={{pers.id}} id={{pers.id}}
                    ng-click='getMyId($event)'>{{pers.name}}
            </button>
        </div>
    </td>
</tr>

это не работает! Требуется только идентификатор или идентификатор данных. Или мне нужно использовать оба из них, потому что мне нужно получить идентификатор parentNode, и это будет с "id", и мне нужно получить информацию о кнопке, и это будет сделано с помощью " данных идентификатор"

вот мой код контроллера:

$scope.rep={};
var ids=[];

$scope.rep={};
var ids=[];

$scope.getMyId = function(e){
    //console.log(e.target.parentNode.id);
    var id_q = $(e.target).data('id');
    var id = document.getElementById(id_q).parentNode.id;
    console.log("id_q= "+id_q);
    console.log("id= "+id);
    ids=[id_q,id];
    queryProvider.getById(ids,function(rep){
       $scope.rep=rep;
    });
}

Может кто-нибудь мне помочь?