// Инициализация переменных
var div1 = document.querySelector('.test1'),
    div2 = document.querySelector('.test2'),
    visibility = false;

// Функция, которая блоку .test2 устанавливает
// css-свойство display:none или block
function toggle () {
    // если visibility  true, то display: block, иначе display: none
    div2.style.display = visibility ? 'block' : 'none';
}

// При клике по .test1 выполнять следующие действия:
div1.addEventListener('click', function (e) {
    e.stopPropagation(); // Отчищать поток существующих событий(кликов, наведений мыши и прочего)
    visibility = !visibility; // Установить булеву переменную в противоположное значение 
    toggle(); //  Вызвать функцию toggle
}, false);

// Клик по документу(нужно для эмуляции клика вне .tes1 и .test2)
document.addEventListener('click', function () {
    visibility = false; // установить переменную в false
    toggle(); // вызвать функцию toggle
});

// клик по .test2
div2.addEventListener('click', function (e) {
    e.stopPropagation(); // Очищать поток всех событий(нужно для предотвращение клика по document)
}, false);

Тоже были сомнения насчет ангуляра из-за этих статей. Когда изучил его на отличном уровне и покопался в потрохах, то понял, что авторы этих статей разбираются в ангуляре, примерно как свиньи в апельсинах. В таком тоне, который присущ этим статьям, можно написать о чем угодно, и это будет иметь уничижительный эффект.
Можете попробовать Angular Light. Коллега на нем проект пилит. Мелкие вещи, вроде двухсторонней связи данных, он разруливает хорошо.

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