Тимофей

ВАЖНО! Ниже строго ИМХО.

Если коротко, то либо Angular 4, либо Vue.

Angular (почти) привязан к TypeScript (что не плохо, но стоит иметь в виду) и строг с точки зрения подходов к разработке. Он отлично подходит для крупных компаний, где много разработчиков трудятся над одним проектом. По крайней мере из всех существующих фреймворков/библиотек он лучший в сегменте.
Ну и, разумеется, Angular 1 уже можно даже не рассматривать - это фактически совсем другой фреймворк, да и плюс один из первых в своём роде. На нём была произведена своеобразная работа над ошибками, результат которой мы видим сейчас не только в Angular 2/4, но и во многих других фреймворках/библиотеках.

Vue - это вариант гораздо более простой и понятный, но оттого не менее крутой. Он даёт больше свободы, что скорее плохо для больших команд, но зато писать на нём одно удовольствие. Я бы сказал, что Vue вобрал в себя всё лучшее от Angular и React, в итоге став полноценной альтернативой первому и заменой второму. Он сейчас очень активно развивается и вангую, что рано или поздно он вытеснит React.
И я не утверждаю, что React плохой, просто Vue объективно лучше по всем параметрам. Пока что кроме сообщества в силу разницы в возрасте, но это временно.

Все остальные фреймворки/библиотеки стоят внимания только разве что в целях ознакомления, так как они не дают никаких ощутимых преимуществ перед Vue или Angular.

Через $rootScope?

Такого в ангуляре нет, можно только сделать как-то так:

<div ng-hide='editMode'>{{content}}</div>
<div ng-if='editMode' contenteditable>{{content}}</div>

Очевидно, так происходит потому, что у variantId определен в scope уровнем выше, а директива вообще не создает изолированный scope, то есть использует тот, в котором директива вызвана. Соответственно, у них у всех один и тот же variantId. Проблема будет решена, если просто привязать сам объект к директиве, создав ей собственный scope:

{
        restrict:       'AE',
        templateUrl:    '/admin/templates/template.html',
        replace:        false,
        scope:          { object: '=ngModel' } // что-то типа того
}

<template ng-model='VariantProperties[variantId]'></template>

Ничего не мешает вкладывать ng-repeat друг в друга. А с помощью ng-repeat в связке с ng-include можно вообще рекурсивное дерево сделать.

Не знаю, сработает ли это для множественного значения, но тут точно есть проблема в том, что неправильно составлено значение атрибута ng-options, так как фактическим значением, передаваемым (и читаемым из) ng-model будет полный объект account, а не account.id. Нужно использовать select as label for value in array, где select => account.id, label => account.title, value => account. А вообще вопрос бы отпал сам по себе, если бы ты поглядел сюда. Там как раз есть в таблице ровно то, что я написал.

Если имел место редирект (а он тут почти наверняка был), то можно посмотреть в панели разработчика все запросы, которые отправлял браузер, в частности запрос, который получил в ответ команду на редирект.
А так - 500 ошибка где-то в приложении отправляется вручную скорее всего, так что нужно сначала выяснить, где конкретно. Скорее всего какой-то middleware типа bodyparser'а не сумел обработать запрос. А вообще странно, что был именно редирект на /server-error. По-хорошему ошибку нужно выдавать не на редиректе, а непосредственно на странице, на которой она произошла. Ну и еще в консоль приложения загляни, там может тоже что-то полезное есть.

index0h: Нельзя "знать node.js". Это как сказать, что я знаю не Java, а JVM или не C#, а .NET.

Знать надо JavaScript, а в случае с Node.js нужно дополнительно иметь представление об архитектуре серверных приложений (хотя Node.js это не только сервер, а по сути возможность писать на JS вообще все что душе угодно) и о том, какие задачи можно решить модулями npm. Вернее даже не знать, а уметь гуглить и понимать английский.

Но проблема в том, что на хорошем уровне JS знает со значительно большей вероятностью фронтендщик, чем бэкендщик. Отсюда проблема поиска: чтобы писать серверное приложение на Node.js - это либо фронтендщик начинает осваивать сервер, что, безусловно, похвально, но требует понимания многих вещей, с которыми человек ранее не сталкивался, либо бэкендщик начинает осваивать JavaScript, для которого, скорее всего, в новинку событийный подход и другие моменты из мира JavaScript который, как известно, во многом сильно отличается от классических языков с поддержкой ООП. Это я еще не упомянул тот факт, что Node.js появился сравнительно недавно, и специалистов по нему чисто физически не может быть очень много.

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

Итого: дефицит специалистов, которые бы умели все, что необходимо. К тому же ты хочешь получить и фронт, и бэк в одном флаконе, что еще больше усложняет поиск.

Набор программиста-хипстера

В ангуляре нет конструкции условного задания атрибута как ng-class, так что либо писать что-то типа attr="{{condition ? trueValue : falseValue}}", либо, если необходимо обязательно именно наличие/отсутствие атрибута, воспользоваться ng-switch/ng-if. Привязаться именно к классу у tr тоже не получится напрямую, в данном случае нужно записать у tr конструкцию ng-class="{ 'some-class': condition }", а в td делать проверку по этому condition.

В ангуляре нет конструкции условного задания атрибута как ng-class, так что либо писать что-то типа attr="{{condition ? trueValue : falseValue}}", либо, если необходимо обязательно именно наличие/отсутствие атрибута, воспользоваться ng-switch/ng-if. Привязаться именно к классу у tr тоже не получится напрямую, в данном случае нужно записать у tr конструкцию ng-class="{ 'some-class': condition }", а в td делать проверку по этому condition.

Ну если уровень вложенности всегда один и небольшой, то почему бы и не использовать вложенные ng-repeat. В противном случае получается древовидная структура - тогда просто нужно сделать рекурсивное подключение шаблона в том же ng-repeat, что-то типа такого:

<script type="text/ng-template" id="tree-tmpl">
<ul>
    <li ng-repeat="item in list">
        {{item.name}}
        <div
                ng-if="item.children && item.children.length"
                ng-init="list=item.children"
                ng-include="'tree-tmpl'"
        ></div>
    </li>
</ul>
</script>

<div class="tree-list" ng-include="'tree-tmpl'"></div>

Делаешь в scope функцию, которая проходится по всем привязанным в ng-model свойствам этих чекбоксов и устанавливает их значения в нужные (true по умолчанию или то, что у тебя в ng-true-value инпута).

Во-первых, нужно подключить в зависимости модуля приложения ngAnimate (не забыв сам скрипт подключить, само собой).
Во-вторых, задать в css transition'ы для элементов, которые нужно анимировать.
Дальше ангуляр сам поймет, что с этим делать, и если все правильно прописано в стилях, то, как говорится, все заработает само. Только нужно разобраться с классами, которые ангуляр подставляет для анимации (или настроить свои в config через $animateProvider).
Подробнее тут и в гугле.