AngularJS ng-repeat для одной строки в выборке PDO

Question

Я новичок в Angular и, похоже, с трудом выясняю, почему я получаю пустые поля.Я использую версию angular-min и angular-route версии 1.7.7.

Данные извлекаются из таблицы, называемой "news", и мне нужны только столбцы ID и ARTICLE.Столбец ARTICLE хранится в текстовой области CKEditor.

Мой маршрут выглядит следующим образом:

var app = angular.module("HabbfinityApp", ["ngRoute"]);
app.config(['$routeProvider','$locationProvider',
function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
    .when("/", {
        templateUrl : "home.php"
    }).when("/home", {
        redirectTo : "/"
    }).when("/news", {
        templateUrl : "news.php"
    }).when("/newsinfo/:id", {
        templateUrl : "newsinfo.php",
        controller: "newsList"
    }).otherwise({
        redirectTo : "/"
    });
}]);
app.controller("newsList", function($scope, $http, $routeParams){
    var id = $routeParams.id;
    $http.get("newsitem.php?id=" + id)
    .then(function(resp){
        $scope.item = resp;
    });
});
app.filter('unsafe', function($sce) {
    return function(val) {
        return $sce.trustAsHtml(val);
    };
});

Мой newsitem.php выглядит следующим образом:

<?php
    require('config2.php');
    $id = $_GET["id"];
    $newsQuery = $dbh->prepare("SELECT id, article FROM news WHERE id=:id LIMIT 1");
    $newsQuery->execute(array(":id"=>$id));
    $newsQueryData = $newsQuery->fetch(PDO::FETCH_ASSOC);
    echo json_encode($newsQueryData);
?>

Мой newsinfo.phpвыглядит так:

<div class="row">
    <div class="col-md-12">
        <div class="panel-default panel-custom">
            <div class="panel-heading">
                <h3 class="panel-title"><i class="fa fa-lg fa-newspaper-o" aria-hidden="true"></i> News</h3>
            </div>
            <div class="panel-body">
                <div ng-controller="newsList">
                    <div ng-repeat="x in item">
                        <img src="assets/images/news.png" alt="News" class="img-center img-responsive">
                        <br>
                        <a href="https://twitter.com/share?url=https://habbfinity.ca/newsinfo/{{x.id}}&text=Take a look at this news article!" class="btn btn-info" target="_blank">Tweet</a>
                        <br>
                        <br>
                        <p ng-bind-html="x.article | unsafe"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

ВЫПУСК

После первого изображения, кнопки Twitter и реальной статьи все повторяется еще пять раз, поэтому я получаю шесть изображенийи шесть кнопок твита, где идентификатор повторяющейся пяти пуст.

Вот var_dump, использующий htmlentities, так что вы можете точно видеть, что эти столбцы вытягивают.

string(899) "{"id":"610","article":"<p style=\"text-align:center\"><strong><span style=\"font-size:26px\">All of us at habbfinity would like wish our<\/span><\/strong><\/p>\r\n\r\n<p style=\"text-align:center\"><strong><span style=\"font-size:26px\">Builder<\/span><\/strong><\/p>\r\n\r\n<p style=\"text-align:center\"><strong><span style=\"color:#2980b9\"><span style=\"font-size:48px\">Sarah<\/span><\/span><\/strong><\/p>\r\n\r\n<p style=\"text-align:center\"><img alt=\"Image result for happy birthday gif\" src=\"http:\/\/bestanimations.com\/Holidays\/Birthday\/flowers\/happy-birthday-vintage-roses-gold-gif.gif\" \/><\/p>\r\n"}"

Я пробовалделать:

<div ng-repeat="x in item | limitTo: 1">

Это не работает.

ИСПРАВЛЕНИЕ ТЕМП

После прочтения некоторых постов здесь, мне удалосьвременное исправление.

Я добавил следующее в контроллер newsList:

$scope.id = $routeParams.id;

Затем я изменил newsinfo.php, переместив изображение и кнопку Twitter за пределы ng-repeat и изменил {{x.id}} в твиттер-ссылке на {{id}}.

ВОПРОС

Какможно ли исправить это, чтобы все было в пределах ng-repeat без необходимости использовать временное исправление?

Или, в любом случае, что было сделано для временного исправления, лучший способ сделать это?

ИЗМЕНЕННЫЙ ОТВЕТ / ВОПРОС

Благодаря предложенному ниже решению я смог решить эту проблему.

Однако у меня есть еще один вопрос.

Есть ли способ сделать это на одной странице?Например, news.php - это просто список новостных сообщений, а newsinfo.php - это единственное новостное сообщение.Могу ли я что-то сделать, чтобы получить все это в файле news.php и сохранить маршрут только для / новостей, который бы отображал список, если маршрут не новостной / #, или отображал бы конкретный элемент, если маршрут был новостной / #?