Почему я не могу перезаписать значение такой переменной?

Поскольку вы использовали здесь @, для которого требуется значение из атрибута с директивой интерполяции {{}}. И кажется, что сначала загружается директива, а затем оценивается значение vm.index. Таким образом, изменения не происходят в текущем цикле дайджеста. Если вы хотите, чтобы они отражались, вам нужно запустить цикл дайджеста более безопасным способом, используя $timeout.

$timeout(function(){
  vm.index = parseInt(vm.index, 10)
})

Вышеупомянутая вещь гарантирует, что значение преобразуется в десятичное значение. Добавление будет происходить по директиве html <h2>Item {{ vm.index + 1 }}</h2>

Рабочая демонстрация

Возможная причина

Согласно @dsfq и моему обсуждению, мы прошли угловой $compile API и обнаружили, что это один вызов метода initializeDirectiveBindings, который вызывается только тогда, когда мы используем controllerAs в директиве с изолированной областью. В этой функции есть случаи переключения для различных привязок @, = и & , поэтому, поскольку вы используете @, это означает, что вызывается односторонняя привязка, следующая за кодом случая переключения.

Код

case '@':
    if (!optional && !hasOwnProperty.call(attrs, attrName)) {
        destination[scopeName] = attrs[attrName] = void 0;
    }
    attrs.$observe(attrName, function(value) {
        if (isString(value)) {
            destination[scopeName] = value;
        }
    });
    attrs.$$observers[attrName].$$scope = scope;
    if (isString(attrs[attrName])) {
        // If the attribute has been provided then we trigger an interpolation to ensure
        // the value is there for use in the link fn
        destination[scopeName] = $interpolate(attrs[attrName])(scope);
    }
    break;

В приведенном выше коде вы можете ясно видеть, что там они разместили attrs.$observe, который является одним из видов наблюдателя, который обычно используется, когда значение интерполировано, как в нашем случае это то же самое {{index}}, это означает, что это $observe оценивается при запуске цикла дайджеста, это почему вам нужно поставить $timeout, сделав index значением decimal.

Причина, по которой ответ @dsfq работает, потому что он использует =, обеспечивает двустороннюю привязку, код которой не помещает наблюдатель напрямую извлекать значение из изолированной области, вот код. Таким образом, без цикла дайджеста это значение обновляется.

По-видимому, это как-то связано с односторонней привязкой значения области видимости index. Таким образом, Angular не будет обновлять scope.index (или this.index в случае bindToController: true), потому что область действия настроена как

scope: {
    index: '@'
},

Если вы измените его на двустороннюю привязку, например:

scope: {
    index: '='
},

Это будет работать:

<some-directive index="$index"></some-directive>

Демо: http://plnkr.co/edit/kq16cpk7gyw8IE7HiaQL?p=preview

UPD. @pankajparkar хорошо заметил, что обновление значения в следующем дайджесте решило проблему. Тогда этот подход к проблеме ближе, чем то, что я сделал в этом ответе.