Получение одиночного объекта JSON в массиве

Я застреваю, пытаясь извлечь один элемент json из массива из моего $ http get.

Я попытался использовать область действия и несколько других methods-, но никто не работает.

Появляется объект/данные json (в инспекторе сети Chrome), и мои директивы в моем HTML правильны.

Как я могу заставить Angular понять, что дать один элемент в массиве json директиве?

Мой объект выглядит так:

[{"id": 1, "name": "test1"}]

function productsApiProvider($http, $stateParams) {

    var product_id = $stateParams.product_id;

    var getApiData = function () {
        return $http.get(BASE_URL + product_id);
    };
    var BASE_URL = 'http://123.com/api/item/';

    return {
        getApiData: getApiData
    };

}


function ProductsCtrl($scope, $log, productsApi, UserService) {
    $scope.product=[];
    productsApi.getApiData()
        .then(function (result) {
            console.log(JSON.stringify(result.data)) //Shows log of API data
            $scope.products.unshift(result.data);
        })
        .catch(function (err) {
            $log.error(err);
        });
}