AngularJs show first and last from filtered list
<p>Have some problem show only first and last repeated element after filtering empty string from array.</p>

<p>My code:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var myApp = angular.module('myApp', []);

myApp.controller("myCtrl", function ($scope, $window) {
    $scope.items = [
        { name: "item1", color: "green", form: "" },
        { name: "item2", color: "", form: "circle" },
        { name: "item3", color: "red", form: "" },
        { name: "item4", color: "", form: "oval" },
        { name: "item5", color: "blue", form: "" },
        { name: "item6", color: "", form: "square" },
        { name: "item7", color: "yellow", form: "" },
        { name: "item8", color: "", form: "rectangle" }     
    ];
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
&lt;body ng-app="myApp" ng-controller="myCtrl" class="ng-scope"&gt;
&lt;div ng-repeat="item in items" ng-if="item.form == ''"&gt;
    {{item.name}}-{{item.color}}
&lt;/div&gt;
&lt;br /&gt;
&lt;div ng-repeat="item in items" ng-if="item.color == ''"&gt;
    {{item.name}}-{{item.form}}
&lt;/div&gt;
&lt;br /&gt;
&lt;/body&gt;</code></pre>
</div>
</div>
</p>

<p>But I need show only first and last elenemt in list. 
Ex. in first list: item1-green and item7-yellow (item3-red and item5-blue must be hidden), second list item2-circle and item8-rectangle.</p>