Can't bind inside ng-show that is in ng-repeat - angularjs

Question

So I am working on a small login form using AngularJS and it seemed extremely natural to remove duplicated code by using an ng-repeat directive. Everything is very natural and works well except any kind of binding inside ng-show, this is where things gets unintuitive and break down. A fiddle of the work so far can be found here.
What I am wondering is why does everything break down for ng-show? If I dump the ng-repeat and duplicate the code everything works fine for all three ng-show instances assuming that I manually type the references to the elements and values.
Below is a copy of the fiddle html and javascript:
<div ng-app='loginApp' ng-controller='loginController'>
<form name='loginForm' novalidate>
<div class='form-group' ng-repeat='field in fields'>
<label>{{field.label}}</label>
<input type='{{field.inputType}}' class='form-control' name='{{field.inputName}}' ng-minlength='{{field.minlength}}' ng-maxlength='{{field.maxlength}}' ng-model='field.value' ng-focus='inputFocused'/>
<!-- The ng-show below doesn't work as expected -->
<div ng-show="canShowUserMsgs(inputFocused, loginForm.{{field.inputName}}.$dirty, loginForm.{{field.inputName}}.$invalid)">
<!-- The ng-show below doesn't work as expected -->
<p ng-show="loginForm.{{field.inputName}}.$error.minlength" class='help-block'>Must be more than {{field.minlength}} characters long.</p>
<!-- The ng-show below doesn't work as expected -->
<p ng-show="loginForm.{{field.inputName}}.$error.maxlength" class='help-block'>Must be less than {{field.maxlength}} characters long.</p>
</div>
</div>
</form>
</div>
var loginApp = angular.module('loginApp', []);
loginApp.controller('loginController', function($scope, $http) {
$scope.fields = [
{
label : "User Name",
inputType : "text",
inputName : "userName",
value : "",
minlength : 5,
maxlength : 15
},
{
label : "Password",
inputType : "password",
inputName : "password",
value : "",
minlength : 5,
maxlength : 15
}
];
$scope.canShowUserMsgs = function(inputFocused, inputDirty, inputInvalid) {
return (inputDirty && inputInvalid && !inputFocused); };
});
loginApp.directive('ngFocus', [function() {
return {
restrict: 'A',
link: function(scope, element, attrs, ctrl) {
var modelName = attrs['ngFocus'];
scope[modelName] = false;
element.bind('focus', function(evt) {
scope.$apply(function() {scope[modelName] = true;});
}).bind('blur', function(evt) {
scope.$apply(function() {scope[modelName] = false;});
});
}
}
}]);

Answer 1

you have to add ng-form inside the ng-repeat and need to do some modifications to how you use the ng-show. Check the working sample of your code.
working copy

Answer 2

This doesn't work: <p ng-show="loginForm.{{field.inputName}}.$error.minlength" because the interpretation of the curly brace expression only happens once, there's not two passes: one to generate the bind path without any curly braces, then a second to evaluate the bind path against the scope. It's not like that. Everything happens in a single pass. So, convert it to a controller function call:
<p ng-show="minLength(field)"