0X12eb

Версия Angular не указана, даю пример на Laravel 5 + Angular 2 - GitHub Example

Не вижу смысла добавлять несколько приложений на одну страницу, разве что, для эксперимента.
Пример с GitHub

.finally( () => this.handleComplete )

Вы почти ответили сами на свой вопрос.
Реализуйте абстрактные компоненты, будь то формы или таблицы с настраиваемым функционалом (необходимые параметры передавайте в компонент инпутом, колбеки возвращайте оутпутом)
Если требуются уникальные случаи абстрактных компонентов - наследуйтесь от ранее созданных и уже реализуйте уникальную часть для них.
В итоге у Вас получится один абстрактный компонент. скажем, для таблиц где Вы прогоните все параметры, пришедшие из родительского компонента и отрендерите его, постепенно будете дописывать общие компоненты по мере необходимости.
В конце концов будут настраиваемые компоненты модалок, нотификаторов, аплоадеров, таблиц, форм и т.д. Которые заинкапсулируют в себе весь необходимый функционал и принимающие лишь настройки для тех или иных случаев реализаций.

Нативное мобильное приложение - это обязательное требование?
Если да - IONIC облегчит жизнь, если веб-приложение на одном из последних frontend - фреймворков (таких, как Angular).
Если же нативное мобильное приложение не обязательно - смотрите в сторону PWA - пишем один раз на том же ангуляре, и получаем приложение в вебе + "приложения" под все платформы (+ плюшки типа оффлайн доступа к приложению)

В любом случае всё будет зависеть от бюджета и опыта разработчиков.

Хз что возвращает getCell и зачем функции передавать вторым параметром строку.

<table>
  <tr ng-repeat="x in vm.data" ng-class="{danger: vm.diff_range_start_time >= 10}">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>

Есть три решения:
1 вариант: Внутри выражения фильтра итератор уже проходит по свойствам твоих обьектов массива, поэтому такое должно работать:

<div ng-repeat="article in articles.values | filter:{title:paragraph}"></div>

2 вариант: Пишешь свой кастомный фильтр.
3 вариант: Пишешь filter expression:
template

<div ng-repeat="article in articles.values | filter:filterExpression"></div>

js

sc.filterExpression = article => article.title === paragraph;

В данном случае, конечно, первый вариант лучше остальных.

По средствам чего вы планируете обрабатывать эти самые клики и получать значения атрибутов?
Если, например, будете использовать jQuery, то подойдет такой вариант:

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser'

@Pipe({ name: 'safeHtml' })
export class SafeHtmlPipe implements PipeTransform {
    constructor(private sanitized: DomSanitizer) { }
    transform(value: string) {
        return this.sanitized.bypassSecurityTrustHtml(value);
    }
}

Затем рендерим контент который пришел из RestAPI и работаем со всеми пришедшими тегами и атрибутами:

<div [innerHTML]="data.content | safeHtml"></div>

1 вариант:

myApp.config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/detail');
    $stateProvider
        .state('root', {
            url: '',
            resolve: {
                promiseDatas: function ($state, $http) {
                    return $http.get("params.json");
                }
            },
            controller: function ($state, promiseDatas) {
                var vm = this;
                vm.datas = promiseDatas.data;
                $state.current.data.datas = promiseDatas.data;
            },
            controllerAs: 'root'
            data: {
                datas: {}
            }
        })
        .state('detail', {
            parent: 'root',
            url: '/detail/:id',
            templateUrl: 'pages/detail.html',
            resolve: {
                promiseData: function ($state, $stateParams) {
                    return _.findWhere($state.current.data.datas, { id: $stateParams.id })
                }
            },
            controller: function (promiseData) {
                var vm = this;
                vm.data = promiseData;
            },
            controllerAs: 'detail'
        })
})

2 вариант: Использовать $state.go и передавать { item } напрямую потомку (не придется трогать всю коллекцию и фильтровать ее на наличие интересующего объекта).
3 вариант: Использовать родительский $scope, но от скоупа лучше воздержаться.

Набросал примерный вариант реализации: Plnkr
Для отслеживания смены состояний и вытаскивания параметров из состояний потомков, можно использовать такой вариант:

controller: function($state, $scope, $rootScope) {
        $rootScope.$on("$stateChangeStart", function() {
          $scope.stateParams = $state.params;
        });
      }